Z-index conflict with Flash and DHTML widgets

I’m working on a project that has a Flash movie and a DHTML dropdown menu on the same page. Flash movies like to sit on top of the page and the dropdown would slide behind the movie. Since this isn’t what I wanted, I needed to find a way to make the it have a lower z-index than the dropdown.

I did a Standardista Search for a cure and didn’t see it. But a quick message to the Web Standards Group returned the solution. It’s actually pretty easy.

UFO Flash detection and insertion script

I’m using the UFO JavaScript to detect the browser’s compatibility with the Flash movie and insert it on the fly. This method provides good default content to those without Flash and valid, shiny, happy Flash to those with it.

UFO gives you the ability to insert parameters into the movie and this is what you need to cure the z-index issue. You need to set the wmode parameter to “transparent.”

var FO = { movie:"swf/myMovie.swf", width:"300", height:"120", majorversion:"6", build:"40", wmode:"transparent" }

That’s all there is to it.

8 thoughts on “Z-index conflict with Flash and DHTML widgets

  1. var so = new FlashObject('__swfs/calendario.swf', 'calendario$i', '166', '185', '7', '#ffffff');
    so.addParam('wmode', 'transparent');
    so.addVariable('local', 'data_$x');
    so.write('calendar_$x');

  2. Thanks so much for this little fix. I just today ran into the problem with UFO. I was expecting something much more elaborate. You have saved me hours of research, on only my third google return!

    That’s how this internet thing should work!

    Johnny

  3. I have a bug showing in IE7 where we are using a DHTML “module” that slides (or displays a new headline w/ picture, content & URL) headlines behind each other. The problem in IE7 is that when you slide the last headline to view it, it covers up the H3 below it…like as if it is sliding over that H3 and covering it. We have a width assigned to the ID, but for some reason it still shows outside the containing div. I’ve tried setting z-index on the H3, but that didn’t seem to work. Any ideas?
    Thanks,
    -j

  4. Thank you!!
    I finally managed to get a good result, I’ve fixed it by adding
    wmode=”opaque” to the object and param-tags, because I don’t use the UFO Javascript.
    wmode=”transparant” didn’t work for me, probably because my animation doesn’t have any transparant pixels.

  5. Guess I was too soon with celebrating.
    It worked for FF, but not for IE (doom IE)..
    Guess I have to take a look at that UFO script in order to let it work properly.

  6. This was a big help. I was feeling that wmode worked in UFO but I was feeling too lazy to actually read for it.. so I searched instead. As I knew, it would be much faster to stumble on your website and read yours. ;)

    Thanks for the helpful note about UFO and transparency….
    You know, this works well for absolutely positioned elements hovering over the flash file as well. ;)

    Dave

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>