Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Placing a div in front of a flash embed

Tags:

css

flash

embed

I need to place a div tag above literally everything else on the page. I've read that setting wmode param to opaque will do it, but also heard that that will only effect IE. Is this true? How do you do it?

like image 392
Webnet Avatar asked Jan 21 '10 17:01

Webnet


1 Answers

In your flash applet tag, simply have this:

<object id='flashObject' ....>
    <param ....>
    <param name='wmode' value='opaque'>
    <embed ... wmode='opaque'>
    </embed>
</object>

That should take care of it.

Note that the downside of this is it slows down rendering for both the flash movie and page elements, but shouldn't be a problem in most cases.

Also, by including this as both an object param and an embed attribute, it works in all major browsers.

Edit, as per MidnightLighning's comment:

Once the flash object is prepared in this way, you need to float the div over the page, like so:

<body>
    <object> ... <!-- this is your flash movie --> </object>
    <div id="floater">The Floating Div</div>
</body>

Then create your CSS like this:

#flashObject { position:relative; z-index:1 }
#floater { position:absolute; z-index:100; top:0; left:0; }
like image 200
Ipsquiggle Avatar answered Sep 19 '22 23:09

Ipsquiggle