iFrame problem

Poster: Gavin Kemp
Dated: Thursday September 23 2004 - 16:52:16 BST

Afternoon All,

I have a few high profile clients who are using MAC OS9 and OSX with IE 5.2

I am using the horizontal menu and right underneath the menu I have an iFrame. When you click or mouse over the menu it goes behind the iFrame and not over the iFrame. The only way I can get this to work by the looks of things is by hiding the iFrame when you mouse over the menu. This looks a bit ugly though as you can imagine.

Has anyone seen this before? If so can you get hold of me and tell me what you did to fix it?

Thanks in advance

Gavin

Poster: John
Dated: Thursday September 23 2004 - 18:25:11 BST

Have a URL we can look at?

Poster: Leeson
Dated: Friday September 24 2004 - 10:48:40 BST

It is because in IE for Mac (btw a "dead" browser") iFrames are always on top, regardless of z-index.

You have three options; You make all users use another browser for Mac (may be difficult..). You redesign so that iFrame and menu does not overlap. You use a divloader script. This means that you make a div where the iFrame used to be, and make a hidden (1x1 pixel) iFrame at the bottom of the page. When you click an item in the menu, the link is loaded into the hidden iFrame. A divloader script then loads it into the div. Hope this makes sense.

To see how it works you can go to my (very prelimenary) webpage http://www.mednut.ki.se/research/mmc

Poster: Gavin Kemp
Dated: Friday September 24 2004 - 12:53:04 BST

Hi guys and thanks for the quick response.

Unfortunately I cant change the way the app works as I have it in over 30 clients at the moment. Coupled with this doing that to fix a "dead browser" is not feasible as it will be phased out.

The only issue I have is that I am dealing with large corporates so there policy for IT change is rather slow. Could take a few months to phase out IE.

Leeson is that an iFrame right underneath your menu structure? Not to sure quite what you have done?

If it cannot be done then thats something I will have to pass on up through the ranks.

Thanks

Gav

Poster: Leeson
Dated: Friday September 24 2004 - 13:03:44 BST

No, it is not an iFrame. It is a div that behaves like an iFrame (thanks to the divloader script). I used to have an iFrame there, but then had the same problem as you are experiencing (there are also problems with the Safari browser, ie the menu does not detect mouseover where the menu overlaps the iFrame and therefore immediately closes). I used a ready-made divloader script from http://www.dyn-web.com, but I am sure there are others, or maybe you can make one yourself. You also have to add a bit of code to the pages that are supposed to be loaded into the div. With a div (aka "display") and a "hidden" iFrame (aka "buffer") the page can be made to look the same as if you had an iFrame, ie no change from the user's point of view (except that it works on IE for Mac..). Look at the source for the specific details (source of the main page http://www.mitomed.se/.

Poster: Gavin Kemp
Dated: Friday September 24 2004 - 14:03:18 BST

Excellent, I will give that all a whirl.
Thanks for your help!

Gavin

Poster: kevin3442
Dated: Friday September 24 2004 - 17:23:40 BST

Hi Gavin,

Leeson's divloader suggestion is an excellent one. I've seen it used successfully on at least one other site using Milonic menus (if I can find the reference I'll post a link).

In the situation where most of your page content is in an iframe, the div hiding approach makes the menu accessible but, as you've seen, leaves a big "hole" on the screen while the user is browsing the menus. Another trick I've seen used to minimize the visualt impact of this "hole" suddenly appearing is to put a .gif inside a <div> behind the iframe. The .gif would be a screen capture of what the iframe area might normally look like with the content in the iframe (scrolled to the top). The iframe will go on top just as it does with the menus. Since the .gif is layered behind the iframe, the user doesn't see the .gif until the iframe disappears. To the user, it may simply look like the iframe scrolls to the top when the menus are open and then returns to the place where they left the iframe when the menus close. (This approach is also effective with flash animations that want to stay on top.)

Anyway... the divloader is the best way to go if you can. But if you have to resort to trhe div hiding, I just thought I'd throw in an idea to lessen it's visual impact.

THANKS LEESON for jumping in with some excellent advice.

Cheers,

Kevin