HTML div above a Flash animation on Linux - it’s possible! 21.07.2006
Posted by marcoos in css, dev, firefox, google, html, in english, javascript, mozilla.trackback
Yes, it is really possible if only you’re using a Gecko-based browser like Firefox. If you used the pull-down menu on Google Video, you have already even seen it in action.
So, how did Google do it? Well, I analyzed their code and the answer is simple: they put an iframe between the Flash and the div using z-index. Hey, you tried it and it didn’t work? That’s because it needs a little hack: the iframe’s CSS “display” property must be set to “none” at first (style=”display: none”) and be changed to “block” via JavaScript after the <embed> element is rendered. With this hack - it works!
So, take a look at the example. For your convinience, I’ve mirrored it on three servers:
- server 1 (pertus.com.pl, Legnica, Poland)
- server 2 (students’ server at the Opole University of Technology, Opole, Poland)
- server 3 (AviaryPL Team’s server at the Szczecin University of Agriculture, Szczecin, Poland)
OK, before you slashdot or digg this, please don’t link to the examples directly. Link to this post only.
Is it only for linux? On windows I don’t see any div on top (?)
.. other thing that it’s probably more appropriate to use ‘on top’ instead of ‘above’ term. ‘Above’ suggested to me that you want to precede flash object with div in document.. like above on y axis
For Windows you also need the usual wmode=”transparent”. I’ve just added it to the example.
And “above” here means ‘above on the z-axis”. :)
server no2 doesn’t work. 403 forbidden
Oops, I forgot to chmod +r. Fixed. :-)
Wonderfull!! I have been looking for a sollution for weeks now.
Can this also be done with java applets?
Well, to answer my own question: Yes you can also get a HTML div layer on top of a java applet. However, I needed something else (dynamic menu) and I can’t get that to work.
can anyone help about how to put a layer above a java applet ?
Thanks for the info marcoos. Very useful. Thought everyone may like to know that you can use the same empty iframe hack to stop dropdowns showing through divs in IE - very annoying bug.
Just in case anyone’s still checking this thread, BestBuy.com would seem to dispute that this only works in Gecko browsers (roll over the top nav to see a menu sit on top of the middle Flash movie, which works in IE6 and Safari). The problem is, I’m having trouble figuring out how. I’m a relative rookie when it comes to CSS-based design and my own efforts have proven fruitless. I’m not sure if they use any JS tricks, but I’ve searched the HTML and CSS code and iframes are not involved.
One more example without iframes or a special JavaScript:
http://particletree.com/examples/flashunderlayer
There are scripts, but it doesn’t look to me like any of them have anything to do with the layering.
FYI:
Quote: “…BestBuy.com would seem to dispute that this only works in Gecko…”
Well, all those examples for HTML on top of (higher z-index) Flash, also see http://www.communitymx.com/content/source/E5141/wmodeopaque.htm for one more, work in FF 2.0 in WinXP but not in FF 2.0 in Linux. I’m using FP9 (XP) and FP9-beta (Linux).
So saying “firefox” is not enough when one says works/doesn´t”.
I forgot to mention that example http://beta.aviary.pl/marcoos/flashlinux/ DOES work in my FF 2.0 Linux - it is the only one that does. So the ugly iframe hack saves the day… (or it doesn’t if one doesn’t want such dirty hacks).
FYI:
(Thanks to running multiple OSs for just such x-browser testing purposes using VMware…) I just tested this iframe hack example page in FF2 (XP and Linux), IE7 (XP) and IE6 (Win98) - works in all modern browsers. I only tested with FP9 in all cases though.
can u please help me with the Html code for running flash in firefox, the code which i have is running only in microsoft internet explorer.
hey priyanka,
try using swfobject. it’s a free js file available on internet and easy to learn.For code assistance u can ping me anytime.
Nice, but if you place a transparent div (style.opacity=0.XX) or a div with background set to a semi-transparent PNG over the flash created in this way, the flash content wont be visible “under” the div.
In windows it even allows me to play flash video (for example from youtube) and place semi-transparent div over it, and it sums transparency on the run.
I think it is Adobe fault - on Linux the Flash plugin behaves in this way both on Firefox and Opera and maybe other browsers. So instead of creating hacks we should contact Adobe and force them to correct their product. Linux browsers are not Internet Explorer to build hacks for them.
No Javascript
No Iframes
only css styling
works on firefox, ie 6 , opera
http://test.metroweb.gr/html_over_flash/
I hope it helps
siarlis: Your code does NOT work on Linux. This is why the iframe hack is needed.
woopz i understand …….
Is it possible to make iframe transparent by keeping flashobject behind.
help needed
In this example, “HTML DIV!”’s background is set to white. If I remove the background property, it becomes transparent in Firefox, but remains white in Internet Explorer (IE7).
How can I make it trully transparent?
[...] As well it enabled us to fix our menu’s so that they float over flash in Linux using this [...]
Hi guys, did anyone get any work around for displaying transparent DIV over the flash movie? It looks very ugly on Linux.
http://www.littlehome.co.uk/LH-2007/Body2.php
I checked with Safari and FF on Mac; it’s fine in there.
this works perfect ! thx for sharing
This is great. I have battled with this on linux for a while with bad hacks. (…hiding divs with flash temporarily, etc.)
I wish it worked on Windows without wmode transparent. I’m having an issue getting a div from a menu over an advertisement that we don’t have control over. We can’t set wmode.
Does anyone know of a similar hack for windows that works for a SWF that does not have wmode set to transparent?
hi
when i try this, it works greate, but one thing comes up.
In the LAYER ON TOP it writes out FALSE befor the image content. Why?
check the url here: http://www.piliz.se/flashtest/index_iframe.html
[...] linux nu stie de wmode transparent. Asa ca nu prea vad meniul daca n-am flashblock. Solutia e aici (si din cate stiu e singura). Faza cu z-index (care vad ca s-a incercat) nu [...]
very interesting, but I don’t agree with you
Idetrorce
Hi, I have this problem on dynamic menu at http://www.qarbon.com. On FF in linux meu is still under FLASH banner. There is wmode transparent, but still don’t work. Any solutions? Thanks
Hi,
I tried this technique for the site I’m coding, but I don’t know why in FF2.0.0.11 Windows & Linux it raises a js error like “Ns component initialisation failed while creating iChannel” or something like this.
about:blank is not a better choice… I want to put a layered menu “above” the flash, with transparency effects.
But, even with removing the background property of the iframe, the background is still while (this is for windows and linux…).
Have a look: http://www.pokemon-france.com
Note: the solution explained here IS NOT yet installed. For tests, I guess save page (html only), adding a tag and modifying page locally would do…
Any idea ?
I’ve got the same probleme as a lot of personns here.
I used to work on windows. I have to use the code on linux-firefox.
This solution works, but the iframe can’t be transparent, the iframe is still white.
Any solution?
thank you. the iframe hack just works. I’ve tried on sample page. But unlucky, i try to put images in the div and set the iframe to allowtranparency = true.
And se inner the iframe is background transparent. but the images dosen’t show properly over white background (transparent not works)
check out the page http://www.ufc.com which have transparent menu over flash
[...] ImageLightbox usw. Die Einzige mir bekannte Lösung dafür ist leider mit extremen Aufwand verbunden: HTML div above a Flash animation on Linux - it’s possible! « marcoos.techblog Kurz: mit einem absolut positioniertem iframe kann man das Flash überdecken, darüber kann dann der [...]
[...] : marcoos.com Add a comment to “Firefox wmode problem under Linux” [...]
Hi, is this possible to make it work with SWFobject JS script? It would be great, thx for your help ;)
hi, thanks friends.I was searching for this code to embed two flash movies in one page and play in firefox smoothly.i used i fram method and its working.
Here is the solution to css / js menu that won’t show on top of the flash movie. It combines this idea with another javascript menus. You can probably adapt it to any kind of dropdown. You only need to make the iframe appear and disappear (display:block display:none) when your menu comes up and down.
Link:
http://www.isayjesusis.com/css
Is there a way to link the submenus and to have more then just one.
I am using this example:
http://www.communitymx.com/content/source/E5141/wmodeopaque.htm
Thanks!