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

No comments at this time

Get yourself heard

Categories

Subscribe

All Posts

Javascript posts

All Comments

This post comments

© Copyright CodeAssembly

All code is licensed under GPL, unless otherwise noted