Tips on how to show a div above a page that has flash objects

2007-10-16

Two small functions that hide and show all flash objects on the page, so that they do not interfere with divs that are above them

Flash objects have a very nasty property (or bug, name it how you want) that does not allow a div or other html object to show above them. They can only be transparent and allow content that is underneath them to be visible. But having a transparent flash has a lot of limitations. One of them is that you can not click on objects behind them, all clicks are made on the flash object.

This bug becomes very annoying when you want to install a image gallery like "name here" or want to implement a similliar system that allows a partial transparent div to fill the entire page. When your div will cover the entire page, flash objects will appear above your layer even if it is the topmost ( the biggest z-index ). You can't make anything show above the flash objects, so there is only one solution. Hide all flash objects on the page. Here is how. Use the following javascript functions. Use the hideflash function before you display your overlay layer (image gallery etc.) and call the showflash function when you hide your overlay layer.

function hideflash()
{
	/* hide all flash in the page */
	flash = document.getElementsByTagName('embed')
	for (var i = 0; i < flash.length; i++) 
	{ 
		flash[i].style.visibility = 'hidden';
	}
}
function showflash()
{
	/* show all flash */
	flash = document.getElementsByTagName('embed')
	for (var i = 0; i < flash.length; i++) 
	{ 
		flash[i].style.visibility = 'visible';
	}
}

To have a transparent flash you must set wmode to transparent option like this.

<embed width="100" height="100" src="myflash.swf" quality="best"  wmode="opaque" bgcolor="#FFFFFF" type="application/x-shockwave-flash"/>

You can also try to use UFO (unobtrusive flash objects) to show your flash objects. This can help you when dealing with browsers that do not support flash. With help from this library you can have an alternative div that can be shown when flash is not present.

Share this with the world

Related

Comments

Jeevan K Augustin

it's working fine..setting the wmode to transparent option.. thanks a lot for the information

Posted on 2009-01-06 06:42:44
ahmed

thank you so much
i used it in my games site;
http://gamezat.net
for hide flashes

Posted on 2009-01-07 14:10:27
ButtonBeats

I found a way to put a div layer above a flash layer. I will post the code below. You have to use this code to embed your flash. Then your div layer will show up over the flash layer.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="FlashID4" width="696" height="266" align="top" id="FlashID4">
<param name="movie" value="images/piano2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/piano2.swf" width="696" height="266">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="696" height="266" align="top" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

Posted on 2010-01-29 07:07:05
Hosting Best

Awesome! My pop up menu was getting overpowered by the flash in the page, thanks for the solution!

Posted on 2011-05-21 10:22:56

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu