PDA

View Full Version : iframe shim fix for firefox?



FerdFrin
07-24-2008, 03:08 PM
1) Script Title: Chrome CSS Drop Down Menu (v2.01)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/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
07-24-2008, 05:52 PM
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
07-25-2008, 08:00 AM
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
07-25-2008, 01:17 PM
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
07-25-2008, 10:29 PM
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
07-29-2008, 10:46 AM
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
07-29-2008, 04:37 PM
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
09-26-2008, 10:08 AM
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
09-26-2008, 12:40 PM
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/showthread.php?p=110822#post110822

FerdFrin
09-26-2008, 01:48 PM
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: progid:DXImageTransform.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?

jscheuer1
09-26-2008, 02:39 PM
Perhaps a clarification is req'd - (see attachment): I have a java applet (no flash invloved at all here)

I thought that might be the case, but this is the first that you've mentioned Java. Java applets have a mind of their own as far as where they will stack on a page, much like iframe. In the first case this is due to a lack of support (as far as I know of) in either the Java applet object, or the Java language itself for allowing it to reliably appear underneath HTML content on a page. In the second case, iframe is being deprecated. As a result browser manufacturers feel no particular pressure to bring their product into conformance with standards for it, in fact - there are no standards I am aware of for it, at least none since HTML 4.01 strict and above, possibly none at all.

So you really are pretty much on your own, where through trial and error in the various browsers you choose to test in you might be able to achieve the effect you are after.

A little more about browsers and iframe - IE is built upon the proprietary code of MS. In the past it has been very quirky, but the latest versions are much better. However, as regards iframe, it is its quirks that allow things to work as expected - this because iframe has no standards. The same is basically true of FF - it's built upon the Mozilla browser model and is continually improving its adherence to standards - no help with iframe though - you just lucked out there too. Opera uses its own browser engine. It's very compliant, but though it is constantly improving, lacks support for some things. The Opera philosophy has always been in part that, if there are no standards, we will not waste too much code on it. Their iframe model has always been to have all iframes on top, though that may have changed in more recent versions. With GC, you are dealing with the KHTML browser model, the same used for Safari and some Linux based browsers. However, (last I heard) GC was using an outdated version of this. That may not matter so much for iframe though - as I said, it is generally not supported in any uniform way.

I would think that your best bet would be to either port your applet to Flash, where its behavior in this regard can probably (be warned, certain poorly planned Flash code will not respond correctly to wmode in certain browsers) be controlled with the wmode param/attribute of its object/embed tag(s), or to investigate if there is a way via the Java language or applet tag to control this behavior. The second option I believe to be a dead end, but I may just not have investigated enough.

You could try changing the iframe's display to none, or its visibility to hidden just while the drop down would be over it. Or change the src attribute of the iframe while the drop down is over it. Any one of these (in combination with some other(s)) might work for you in a particular browser.

Finally, if all else fails:

Move the applet and/or menu on the page so that there can be no stacking conflicts with the menu.

FerdFrin
09-29-2008, 09:54 AM
I have changed the iframe background colour to black & increased it's width so I can see part of it protruding to the right of the menu. This shows that the iframe shim is under the applet. Probably obvious but maybe it helps?

Any further input welcome!

FerdFrin
09-29-2008, 11:34 AM
Firstly ignore the last post - I did not see the prev response before posting.
Thanks for that extensive answer John - I was reaching some similar conclusions.

I'm just investigating one java based soln offered by 'Crookster' here:

http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4984794

Hope the soln will be more encouraging than his username tends to suggest :)
Will post if it works ...