.Ted.Drake:last-child {woo:hoo}

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.

Posted

in

, , , ,

by

Ted

Tags:

Comments

8 responses to “Z-index conflict with Flash and DHTML widgets”

  1. Nilton Bicalho Avatar
    Nilton Bicalho

    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. Johnny Avatar
    Johnny

    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. jstar Avatar
    jstar

    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. Joe Avatar
    Joe

    Thank you!! My DHTML menu kept getting covered up by flash. Now it is fixed. What else can I say?

  5. Paul Avatar
    Paul

    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.

  6. Paul Avatar
    Paul

    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.

  7. Dave Gregory Avatar
    Dave Gregory

    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

  8. Jason Avatar
    Jason

    This link will help. This article is about flash and Javascript conflict

    http://www.w3courses.com/index.php?subaction=showfull&id=1187237848&ucat=15,20&category=15&catdisplay=JavaScript

Leave a Reply

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