WCH

Can you place layers over flash files or drop downs?

Dec 8, 2003 by Aleksandar Vacić 2 minute read

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.

Ma```objectivec

• 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.