Forums
This topic is locked
z-index and Flash
Posted 16 Mar 2005 19:18:16
1
has voted
16 Mar 2005 19:18:16 Matt Bailey posted:
I have an absolutely positioned div with my nav in and an absolutely positioned div with a Flash movie in. The nav div has a z-index value of 10 and the Flash div has a z-index value of 0. However, the nav refuses to go 'over' the Flash movie. Has anyone come across this problem before?___________________________________
* Sorry... how do you do that again?... *
Replies
Replied 16 Mar 2005 19:34:22
16 Mar 2005 19:34:22 Dave Thomas replied:
this is an age old misery of flash users.
flash takes top level, although with the onset of flash mx, it was possible to publish with a transparent background.
sure i've seen a workaround somewhere tho, will keep my eyes peeled for ya <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>
regards
Dave Thomas
<b>DMX Zone Manager</b>
flash takes top level, although with the onset of flash mx, it was possible to publish with a transparent background.
sure i've seen a workaround somewhere tho, will keep my eyes peeled for ya <img src=../images/dmxzone/forum/icon_smile_wink.gif border=0 align=middle>
regards
Dave Thomas
<b>DMX Zone Manager</b>
Replied 16 Mar 2005 19:37:30
16 Mar 2005 19:37:30 Matt Bailey replied:
Thanks Dave, so I'm not going mad then! I definately need to find a work around so if you do think of where you saw it let me know. In the meantime I'll do a bit of googling!
___________________________________
* Sorry... how do you do that again?... *
___________________________________
* Sorry... how do you do that again?... *
Replied 16 Mar 2005 19:48:12
16 Mar 2005 19:48:12 Matt Bailey replied:
I'm halfway there on a solution:
On your HTML page add the following parameter to the Flash OBJECT tag: param name="wmode" value="transparent"
On your HTML page add the following parameter to the Flash EMBED tag: wmode="transparent"
This works fine in Safari (Mac), IE 6 (PC), Firefox (PC) and Netscape 7 (PC), but in Firefox (Mac) and Netscape (Mac) you can't select any of the buttons in the navigation where they go under the Flash Movie.
___________________________________
* Sorry... how do you do that again?... *
Edited by - matm00 on 16 Mar 2005 19:54:20
On your HTML page add the following parameter to the Flash OBJECT tag: param name="wmode" value="transparent"
On your HTML page add the following parameter to the Flash EMBED tag: wmode="transparent"
This works fine in Safari (Mac), IE 6 (PC), Firefox (PC) and Netscape 7 (PC), but in Firefox (Mac) and Netscape (Mac) you can't select any of the buttons in the navigation where they go under the Flash Movie.
___________________________________
* Sorry... how do you do that again?... *
Edited by - matm00 on 16 Mar 2005 19:54:20
Replied 20 Apr 2007 23:10:21
20 Apr 2007 23:10:21 Steve Skinner replied:
I am now running CS3 Dreamweaver and enjoying the Spry tools, however, my shiny new spry flyout menu doesn't go over flash animations in Firefox 2, but it does in IE. I've followed the instructions for the wmode="transparent" thing, but that does not solve the problem for Firefox. Does anyone have a solution for this z-index thing?
Replied 20 Apr 2007 23:33:41
20 Apr 2007 23:33:41 Steve Skinner replied:
Ok I've got this figured out. Since the release of IE 7, newer versions of Dreamweaver incorporate new code to your flash object - the stuff relating to AC_RunActiveContent.js. This is what solves the flash display issue in IE 7. However, it also created a problem with flash layering (z-index) when something like dhtml menus are present.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
Replied 21 Apr 2007 09:33:10
21 Apr 2007 09:33:10 Matt Bailey replied:
There is an alternative, more elegant way of embedding flash on your page - check out blog.deconcept.com/swfobject/. It creates nice clean code on your page that validates and is less bloated than Dreamweaver's solution <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
___________________________________
"Some people say if you play a windows cd backwards it plays satanic messages. That's nothing, because if you play it forwards it installs windows!"
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
___________________________________
"Some people say if you play a windows cd backwards it plays satanic messages. That's nothing, because if you play it forwards it installs windows!"
Replied 24 Apr 2007 14:52:00
24 Apr 2007 14:52:00 satheesh Dominic replied:
To solve this have a look at this link and understand the difference between "windowed elements" and "Windowless elements"....
support.microsoft.com/default.aspx?scid=kb;en-us;177378&Product=iep
Explanation:
The windowed elements by default will take top Z-index. So you have to make it into windowless to solve it. Swf is a windowed element by default.....
The Solution:
1.When you export swf file from Flash go to the export settings panel and go to html properties....then set "Window Mode"into "Opaque windowless or Transparent windowless" mode then.....copy the html code generated in that html page and use that code to call the swf file from your HTML page.
or try this
2. remove the Object tag used to call the swf file and use only Embed tag..(i.e. Only the tags coming inside the embed tag and then close the embed tag)
Normal code:
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="715" height="308">
<param name="movie" value="yourflashfile.swf" />
<param name="quality" value="high" />
<embed src="yourflashfile.swf" quality="high" pluginspage="www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="715" height="308"></embed>
</object>
Modified code :
<embed src="yourflashfile.swf" quality="high" pluginspage="www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="715" height="308"></embed>
This way if you use embed source alone you can solve the problem.
Visit www.grisoft.com's home page to see how this problem is fixed.....
Regards,
Edited by - satheeshkd on 26 Apr 2007 07:16:55
Edited by - satheeshkd on 08 May 2007 08:47:15
support.microsoft.com/default.aspx?scid=kb;en-us;177378&Product=iep
Explanation:
The windowed elements by default will take top Z-index. So you have to make it into windowless to solve it. Swf is a windowed element by default.....
The Solution:
1.When you export swf file from Flash go to the export settings panel and go to html properties....then set "Window Mode"into "Opaque windowless or Transparent windowless" mode then.....copy the html code generated in that html page and use that code to call the swf file from your HTML page.
or try this
2. remove the Object tag used to call the swf file and use only Embed tag..(i.e. Only the tags coming inside the embed tag and then close the embed tag)
Normal code:
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="715" height="308">
<param name="movie" value="yourflashfile.swf" />
<param name="quality" value="high" />
<embed src="yourflashfile.swf" quality="high" pluginspage="www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="715" height="308"></embed>
</object>
Modified code :
<embed src="yourflashfile.swf" quality="high" pluginspage="www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="715" height="308"></embed>
This way if you use embed source alone you can solve the problem.
Visit www.grisoft.com's home page to see how this problem is fixed.....
Regards,
Edited by - satheeshkd on 26 Apr 2007 07:16:55
Edited by - satheeshkd on 08 May 2007 08:47:15
Replied 06 Jul 2007 15:17:47
06 Jul 2007 15:17:47 Audrey Burn replied:
Hi - forgive me I'm not an expert, I think I know just enough to be dangerous. But I'm trying to embed a swf file with CSS behind navigation and I tried using the solution below - but already I'm running into a problem. For a while now, I've had issues with many websites and flash detection telling me that I don't have the flash player installed - which I do, the most recent version - on both firefox and safari. So when I tried the method below, I opened up one the supplied files which had detection and a link that would tell you which version you had installed - the first time I clicked on it, it told me what version I had and now, with both firefox and safari, it tells me I don't have it installed. So when I tried using this code in the site that I'm working on, I can't test it because it's telling me that I don't have flash installed.
So has anyone experienced this problem on a mac? It's been happening to me for a while now, but I just kind of blew it off, but now it's a problem. I realize this question is a little off, but ultimately, I need to embed this flash file behind another element!
Thanks to anyone who can help!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
There is an alternative, more elegant way of embedding flash on your page - check out blog.deconcept.com/swfobject/. It creates nice clean code on your page that validates and is less bloated than Dreamweaver's solution <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
___________________________________
"Some people say if you play a windows cd backwards it plays satanic messages. That's nothing, because if you play it forwards it installs windows!"
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
So has anyone experienced this problem on a mac? It's been happening to me for a while now, but I just kind of blew it off, but now it's a problem. I realize this question is a little off, but ultimately, I need to embed this flash file behind another element!
Thanks to anyone who can help!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
There is an alternative, more elegant way of embedding flash on your page - check out blog.deconcept.com/swfobject/. It creates nice clean code on your page that validates and is less bloated than Dreamweaver's solution <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle>
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
___________________________________
"Some people say if you play a windows cd backwards it plays satanic messages. That's nothing, because if you play it forwards it installs windows!"
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Replied 27 Sep 2007 12:24:24
27 Sep 2007 12:24:24 Eric Pugh replied:
I have tried all these solutions for a DHTML menu over an .flv movie. It works fine in IE6 (PC) but I have completely failed to make it work in Firefox (2.0.0.7). Any other ideas will be gratefully received. There must be an answer somewhere.
Replied 01 Apr 2008 04:50:42
01 Apr 2008 04:50:42 Brit N replied:
Dude, i registered to this site just so I could reply and say thank you. You're the freaking man <img src=../images/dmxzone/forum/icon_smile.gif border=0 align=middle> I have been pulling my hair out over this issue for an effing month.
So yeah, thank you very much!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Ok I've got this figured out. Since the release of IE 7, newer versions of Dreamweaver incorporate new code to your flash object - the stuff relating to AC_RunActiveContent.js. This is what solves the flash display issue in IE 7. However, it also created a problem with flash layering (z-index) when something like dhtml menus are present.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
So yeah, thank you very much!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Ok I've got this figured out. Since the release of IE 7, newer versions of Dreamweaver incorporate new code to your flash object - the stuff relating to AC_RunActiveContent.js. This is what solves the flash display issue in IE 7. However, it also created a problem with flash layering (z-index) when something like dhtml menus are present.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Replied 28 Jul 2008 22:45:09
28 Jul 2008 22:45:09 Steven Johnson replied:
I also registered at this site just to say thanks!
The addition of 'wmode','transparent' to the javascript solved my issue and kept the project on track without having to redesign.
Thanks so much for your post!
The addition of 'wmode','transparent' to the javascript solved my issue and kept the project on track without having to redesign.
Thanks so much for your post!
Replied 19 Aug 2008 07:47:06
19 Aug 2008 07:47:06 james townsend replied:
You saved me!!! Registered just to say thanks. Have spent hours looking thru forums that were 3-5 years old. This seems to work on all recent major browsers.
Thanks again!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Ok I've got this figured out. Since the release of IE 7, newer versions of Dreamweaver incorporate new code to your flash object - the stuff relating to AC_RunActiveContent.js. This is what solves the flash display issue in IE 7. However, it also created a problem with flash layering (z-index) when something like dhtml menus are present.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Thanks again!
<BLOCKQUOTE id=quote><font size=1 face="Verdana, Arial, Helvetica" id=quote>quote:<hr height=1 noshade id=quote>
Ok I've got this figured out. Since the release of IE 7, newer versions of Dreamweaver incorporate new code to your flash object - the stuff relating to AC_RunActiveContent.js. This is what solves the flash display issue in IE 7. However, it also created a problem with flash layering (z-index) when something like dhtml menus are present.
I had followed previous (and numerous) examples on using the transparent wmode parameter and addition to the embed tag, but I was still not able to see my dhtml menus over flash. As I discovered, newer versions of Dreamweaver will create some javascript code right above the object tag when you insert flash onto a page. The wmode stuff has to be added to this part as well. Once that's done, your menus will work above the flash.
This javascript snippet which you'll see "AC_FL_RunContent" needs to have the wmode and transparent inserted here. Here's the last part of the tag from my code:
.....'movie','web_assets/movies/swfFile' ); //end AC code
</script>
Just before the 'movie' section, add wmode and transparent like this.
'wmode','transparent','movie','web_assets/movies/swfFile' ); //end AC code
</script>
Once that's there, it should work. Having it only in the parameters of the object tag and calling it in the embed tag isn't enough nowadays it seems.
This might be elementary for more advanced users, but I did not find this solution anywhere so hopefully it will prove useful.
<hr height=1 noshade id=quote></BLOCKQUOTE id=quote></font id=quote><font face="Verdana, Arial, Helvetica" size=2 id=quote>
Replied 21 Nov 2008 21:02:05
21 Nov 2008 21:02:05 mike garite replied:
I to jumped the bandwagon just to say thank you. Never thought I'd even register for one of these things. Thanks again for real!
Replied 21 Nov 2008 21:40:31
21 Nov 2008 21:40:31 Steve Skinner replied:
I appreciate the thanks everyone, and I'm glad to know it helped. After what I went through to figure it out, I had a feeling this information would come in handy to others. It's good to be able to contribute something worthwhile to the forums that have helped me so much.
Replied 24 Nov 2008 19:10:03
24 Nov 2008 19:10:03 Diego Smerine replied:
steve skinner
i too had to register here to say, thank you
would take me a while to figure this out
best regards
i too had to register here to say, thank you
would take me a while to figure this out
best regards
Replied 18 Dec 2008 19:32:11
18 Dec 2008 19:32:11 Chijo Takeda replied:
Hopefully someone is tracking this thread.
I'm attempting this task. Here's the test URLwww.photophil.us/test/pages/earth.html
I am using wmode: transparent and also following the instruction on the Adobe sitekb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=2
The menu system is from plugin lab and the z-index for this menu is set to 50 so it should appear above everything on my page.
I did try enclosing the flash in a div with z-index of 1 but this didn't seem to work either.
Any other ideas on why this isn't working for me?
thanks
Edited by - dogpaw on 18 Dec 2008 19:33:07
Just tested and works great on Win (IE6, FF3, Chrome) and Mac (Safari). It does NOT work on Mac FF3. If anyone can test on that and provide any insight? This the only thing left to finish the site.
Edited by - dogpaw on 19 Dec 2008 02:36:07
I'm attempting this task. Here's the test URLwww.photophil.us/test/pages/earth.html
I am using wmode: transparent and also following the instruction on the Adobe sitekb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=2
The menu system is from plugin lab and the z-index for this menu is set to 50 so it should appear above everything on my page.
I did try enclosing the flash in a div with z-index of 1 but this didn't seem to work either.
Any other ideas on why this isn't working for me?
thanks
Edited by - dogpaw on 18 Dec 2008 19:33:07
Just tested and works great on Win (IE6, FF3, Chrome) and Mac (Safari). It does NOT work on Mac FF3. If anyone can test on that and provide any insight? This the only thing left to finish the site.
Edited by - dogpaw on 19 Dec 2008 02:36:07
Replied 23 Jul 2011 14:36:32
23 Jul 2011 14:36:32 Rose Warrens replied:
when we r going to use div layer z-index property it should display the in front of flash layer.
Aura Vie
Aura Vie
Replied 17 Sep 2011 15:04:00
17 Sep 2011 15:04:00 Coyir momine replied:
Any element with a higher stacking order (z-index) is always on top. Try nesting your embedded flash object in an absolute positioned div with a z-index of -999 inside a relatively positioned div.
Relift XS
Relift XS
Replied 19 Nov 2011 07:36:51
19 Nov 2011 07:36:51 dominiqu erenning replied:
I have this banner I made, its on my website, but its abit too much to the left. What is the code to place with the other code to center the banner up.
Rederme
Rederme