Can you place layers over flash files or drop downs?

It is a known fact that some browsers can’t draw layers (absolutely positioned) over Flash files or drop-down boxes. To see why that happens, refer to my first WCH post, which was my first tackle with this problem.

Now, after extensive testing in several Windows and Mac browsers, I have much better picture how all this works.

If you look at the example page, you’ll find two sets of tests. First, I wanted to see how browsers handle object (or embed) element which loads Flash file without wmode="transparent" parameter (read more about this in Macromedia tech note). I applied WCH script to second layer only.

In the lower set, I added wmode parameter, and applied WCH again.

Windows browsers

IE 6: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
IE 5.5: needs WCH to cover drop-downs and Flash. Transparent Flash is always covered, regardless of WCH.
IE 5.0: WCH uses show/hide workaround. Transparent Flash is always covered, regardless of WCH.
Firebird 0.7: always cover drop-down, only transparent Flash. Transparent Flash is always covered, regardless of WCH.
Opera 7.22: always cover drop-down, never covers Flash (WCH is properly applied but it has no effect – actually it hides the layer itself?!)

It’s an obvious conslusion that WCH can be used only with IE 5.0+ to have any real effect. Since IE/Win rules the end-user market, this script comes very handy.

Mac

OmniWeb 4.5: always covers drop-down, never covers Flash
IE 5.2 Mac: always covers drop-down, only transparent Flash
Opera 6.03 Mac: never covers either drop-down or Flash
Camino 0.7: always cover drop-down, only transparent Flash
Firebird 0.7: always cover drop-down, only transparent Flash
Safari 1.1: always covers drop-down, only transparent Flash (initially all covered, until flash animation starts which then removes the layer)

Conclusion: newer Mac browsers always cover drop-downs (all but Opera 6.03). Flash can be covered if wmode=transparent is used. WCH has no effect in any Mac browser.

Recommendation

WCH script has changed according to findings above. Since it’s usable only in IE/Win, I added the check for this, since its use cause problems in some browsers (Opera, Opera…).

Script uses insertAdjacentHTML, an IE native function, to insert the hiding iFrame. Since script does not deal with any other browser, I have removed almost 3kB of code needed to emulate that method in other browsers. If you need that code (as it is very handy), download it by right-clicking here.

I recommend you always use wmode="transparent" when loading Flash files, and use WCH on for IE/win.

Tags or categories or topics...

Lots of ramblings on this blog...might be easier for you to find your juice through these tags:

Voices from the crowd, 24 so far

Hi Aleksander,

Great work here!

Should WCH be able to work with Suckerfish dropdowns? I’ve tried it without success, but I’m sure I must have it configured incorrectly.

by Chad Smalley
6 years, 2 months after the post

Chad, can you send me the files that’s troubling you so I can take a look? I used it on several projects and it worked fine in all of them.

by aleck
6 years, 2 months after the post

Did you test Netscape 6/7? Unfortunately, that is as you discovered in the AD xMenu, an older version of Moz, and can affect things, (in this case wmode transparent support — and then you can get into which version of the player there is). My point is, there might be cases where it is nice to have something other than just IE using the actual iframe shim.

I’ll probably do some testing of it, and let you know the results, especially if it turns out I have to modify it to work with newer Netscape.

by Tim Connor
6 years, 2 months after the post

Tim, yes I did, and they behave the same as Mozilla Firebird (same engine).

Wow, quick reply. By the way, thanks for the handy scripts, especially if I can get them working to meet requirements. I am not quite ready to try and make them stop supporting NS and push Moz (I’ll probably wait until FF1.0), as just getting the 4xs dropped was enough fun.

GAH, don’t forget how much you hated N6 and do a full install. (I’ve use Fire* since .5) All this crap installed.

Macromedia claims that wmode=transparent only works with n7+ with Flash 6 installed, which is belied by my testing — I had another devloper say n7 without Flash 6 showed through, and N6 with Flash 7 just did, for me personally. I don’t remember which release of Moz 6 is based on (was it pre 1.0, maybe even?), but it might not even have hooks that would allow wmode.

First, I’m testing to see if using the iframe shim, with the appropriate browser detection will work on N6. Then I’ll test a couple different versions/platforms and let you know.

If it works I would be changing the !IE ||Mac line to !((Win && IE) || NS) or something equivalent. Let me know if you are interested in the results, as it would certianly simplify my life if it were added (if it works to the original, and I didn’t have to maintain a branch, of sorts, for my projects.

Oh, there is one other thing I’ll be looking at. Is it just me or is IE5 hiding Flash (they don’t show on your example page in IE5). Since wmode works for IE5, that actually doesn’t seem like the preferred behavior, so I’ll be digging around seeing how your oldie hiding function works, and what it would take to make it leave the Flash alone. Am I missing something?

Ah, sorry to spam your comments with so much. I didn’t see that you were manually loading the elements.

Would you be interested in an the addition of an optional function to load the Array with all selects in the page? It’s pretty simple code (of course, then there is the full round of testing, but you can pretty much skip that, since it would only be happening in WinIE5).

One other really simple option is changing the body class (I’ve got functions handy for adding and removing a given class, without touching the others) and having a css style body.nameOfHidingClass select{display:none; OR visibility:hidden;} The only problem with that is it can cause some re-pulling of background images and similar rerendering, if there is anything css affected by body class, but since it’s just an IE5 work-around…

I suppose I could throw together something on my site (leaving full attribution in place), if you aren’t interested in even the NS complications, but honestly I’d rather just leave you with the maintenance. ;)

Nevermind the NS comments. It seems that it won’t let iframes rise above the flash, so it is pointless anyways. Basically, it seems, if you want a div over Flash, minimum specs are N7+ with Flash6+.

Tim, thanks for the effort.

Currently, I have WCH2 in works, which will be simpler (and a bit smaller) as I now know that I have to deal with IE 5+ only. I have it working (almost) perfectly for IE 5.5+ (stand-alone 5k script) and I’m thinking “do I really need IE 5.0 support”.

Anw, I’ll be adding that entry in a matter of few days, so we’ll see.

Hi aleck,

I would like to ask if the WCH should aslo work on the Drop down list. For your example, I can only see the WCH layer on top of the flash object, but still covered by the drop down list. How to solve this? Please help, Thanks

by Jerry
6 years, 2 months after the post

This is rather outdated entry, so I’m not sure which examples you checked. Take a look in the subcolumn, for WCH3 examples.

Click apply WCH see it working.

by Aleksandar
6 years, 2 months after the post

Thanks. I Googled for “flash over drop down” and found your solution in the 5^th position. Worked like a charm.

by Austin
6 years, 2 months after the post

I could really use your help getting this working.

On our company website I have 2 div layers each containing a flash movie, with one on top of the other. Take a look at it in IE and it works fine but in Firefox the animated bar appears infront the the navigation bar:

http://v3.itr.cn/en/

Any idea how to swap them over? you can view the source to see how it works.…

by Oliver Stedall
6 years, 2 months after the post

I’m not sure what you mean by animated bar. When I open the page in both IE and Firefox, I see large white areas in the middle and large grey area on the left. Looks like physicaly missing content.
I tried disabling AdBlock, but it turned out to be the same. Drop-down navigation can be seen and accessed in both browsers.

Can you build a scaled-down version of problematic page, without the extra content?

yo! Someone manages a pretty nifty hack that causes the Flash div to disapear when the menu drops if, and only if, an old Mac browser is being used. That way the problem of hidden drop downs does not occur. Here’s the site I foudn it on, but I’m wondering if there’s an easy way, I’m haivng a hell of a time decifering this guys’s javaascript etc..

Here’s the site:

http://www.cityofpetal.com/jax/index.htm

Anyone know of a simpler one?

My test is — http://www.dropthatsock.com/testo.php

by Nick
1 year after the post

There is no problem with Mac browsers and drop downs I’m aware of. All Mac browsers I tried will place layer over drop down, but none over Flash files (or any other object tag).

Hiding is not a problem, it can be done exactly as I did in WCH script for the IE5.0.

by Aleksandar
1 year after the post

Thanks for ur help. The site http://www.cityofpetal.com/jax/index.htm
was of great help to me . I was also using wmode and transparent, but its not working in the netscape. When I looked at the website, they are writing it again in tag, i did the same and it helped me a lot

by Shweta
1 year after the post

Just wondered if there was an example that works with the suckerfish type drop down menu. I see someone has asked this as the first comment of the discussion but can’t see if this given as an example anywhere. I can’t get this wch to work with my horizontal drop down. Not really sure how to go about implementing the wch. Understand the basics but must be missing something somewhere. Thanks a lot.

by Bruce
1 year, 1 month after the post

Dears,

i have a page which contains an iframe for browsing some material .
in the main page i have a div which may be displayed over the iframe. the iframe may have some flash -> so the div will not appear if it came over the flash.

the content in the iframe is from a 3^rd party so i cant force the to use wmode=“transparent. so is there anyway to control the div instead of the flash object ????

by Yazeed
1 year, 11 months after the post

Yazeed — what kind of control you need. If wmode=transparent is not set, you can’t do a thing in Firefox — no way to show anything over it.

The only thing you can do in this case is to hide the entire iframe (and thus the flash file as well) when div is about to be displayed. Nothihg else you can do that I know of.

by Aleksandar
1 year, 11 months after the post

wmode=“transparent” is not XHTML compliant. Anyone know a way to get around this and still have the drop downs appear over flash?

by Curtis
1 year, 11 months after the post

param name=“wmode” value=“transparent” /

Hi, i have used DHTML menu in website and flash banner below that , i hae problem that flash is overlapping the dropdown menu in Safari browser,

i have used Wmode for making flash transparant and its working in all other browser.

Thanks

by Vishwesh
2 years after the post

Comments are now closed. I probably thought there was nothing more to say.

Can you place layers over flash files or drop downs?

Windows browsers

Mac

Recommendation

Voices from the crowd, 24 so far

Related posts (possibly)

WCH 2.5 — IE 5.0 support">WCH 2.5 — IE 5.0 support

Embeding Flash in web page

404">Flash ActiveX bug: object 404

Going X

WCH 2">WCH 2

Those things that refuse to obey

Tags or categories or topics...