iframe shim fix for firefox?

[FerdFrin]

1) Script Title: Chrome CSS Drop Down Menu (v2.01)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: iframe shim fix for firefox?

So I've been 'playing' with thi css chrome menu for a few days & sort of got to like it. I have one open issue though:

The iframe shim 'technique' is applied for IE to allow menus to drop on top of applets & flash elements & the like. Works great - but I still have the same problem in Firefox & Opera - drop-down menus disappear behind applets.

Is there perhaps a fix / workaround for this classic problem?

[ddadmin]

Firstly, you should note that the menu has been updated to v2.4 yesterday. Not that it changes anything with the IFRAME shim feature being applied to FF though. For Flash, have you tried adding:

wmode=transparent

to your Flash object?

[FerdFrin]

Thanks for the upgrade info! I'll get this straight away! Unfortunately in my case it's an applet (in a seperate frame) that's the cause of the problem.

Is there not does FF equivalent to this code?

  filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)

[jscheuer1]

In FF this is the equivalent (as close as it gets) to that filter:

opacity:0;

Now, this is only equivalent to the particular configuration you gave (style=0, opacity=0), it has no equivalent to the style property of the filter, but since 0 is the default (uniform opacity) it doesn't need one for that setting. The opacity gradient itself is fairly equivalent, but goes from .0001 to 1, rather than from 0 to 100, with .01 being about the same as IE's 1 and FF's 1 being about the same as IE's 100.

However, in FF it is actually a style, not a filter. And aside from that, may not always work the same as the filter. Usually it does though.

[ddadmin]

In other browsers such as FF, an IFRAME can be rendered transparent just with:

background: transparent

No need to use "opacity". Anyhow, if you wish to enable the IFRAME shim feature on non IE browsers as well, try the modified chrome.js file. Let me know if that fixes your applet overlapping issue.

[FerdFrin]

Great - thanks ddadmin - that's what I was looking for. I have done some testing with mixed results though:

Works in:

IE6 (XP-SP2)
FF3 (XP-SP2)
FF1.5 (Linux)

Does not work in:

Opera 9.51 (XP)
Safari (MacOSX 10.5.4 Leopard)


One more minor comment: In your chrome.js (also released 2.4 I think) I needed to insert a '/' in front of the img name & place it in DocumentRoot. Without this it's expected in cgi-bin, and everything in there apache tries to execute.

dropdownindicator: '<img src="/down.gif" border="0" />'

[ddadmin]

I don't have access to the Mac OS right now unfortunately, and for Opera 9.5, will have to do some reviving to get to. I'll have to possibly get to them when I officially add this fix into the script the next time it's updated.

[FerdFrin]

Well, everything was going fine - my application is ported & working nicely in FF3 thanks to ddadmins patch.

Then along came Google chrome - and I see a huge performance enhancement in the app. Everything works ... apart from the iframe shim for the menu ... the portion of the drop-down that should be over the applet appears to be under the applet.

I have tried replacing the "background: transparent;" with "opacity: 0;" which works in FF, but still no joy in chrome. Is there any chance of a fix for this?

[jscheuer1]

I thought from the beginning that no iframe shim (at least not the sort required by IE 6 for select elements) should be required in FF or any other browser. However, if you have something in an iframe and you are trying to drop over it, various browsers will react in various ways.

It would probably help quite a bit if we had a link to your page:

Please post a link to the page on your site that contains the problematic code so we can check it out.

If the thing in the iframe is Flash, its wmode should be transparent, that will take care of the Flash itself. From there on out, all one would need to worry about is the iframe. Ordinarily, z-index alone should deal with that, but with iframe, there can be issues. It might be better to put the Flash object right on the page. Also, there is a user here who developed a way to drop across frames and iframes. That work is in this thread in the submissions section:

http://www.dynamicdrive.com/forums/s...822#post110822

[FerdFrin]

Perhaps a clarification is req'd - (see attachment): I have a java applet (no flash invloved at all here) in the centre frame of my page. As can be seen in the attachment, the chrome menu portion over the applet actually appears to be UNDER the applet. Playing with z-index (such as wrapping applet in a div with low z-index) does not appear to work.

The iframe shim technique is used by your chrome css menu to overcome this problem in IE. The patch that was provided above extends the same technique to work in FF3. What I would like is the same fix to work in google chrome. I believe the FF fix was the addition of "background: transparent;" Here is the iframeshim code:

if (!this.iframeshimadded){ //if IE5.5 to IE6, create iframe for iframe shim technique
document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; background: transparent; position: absolute; filter: progidXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.iframeshimadded=true
}

I've tried substituting "background: transparent;" with "opacity: 0;" without success.

Here is the code which instanciates the applet:

<APPLET STYLE="position:absolute; bottom:+3; left:+2;"
CODE="applets.LogUpdater.class"
CODEBASE="/classes"
WIDTH="80" HEIGHT="24" ALIGN="bottom" MAYSCRIPT="true">

<PARAM NAME="logport" VALUE="xxxxx">
<PARAM NAME="maxlogrecords" VALUE="500">
<PARAM NAME="verbose" VALUE="true">
</APPLET>

Unfortunately the site involved is not public & I am not able to provide a public Url. wmode seems to be specific to flash as far as I can see.

Does this help?