Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Insert div over flash in IE

Tags:

html

css

flash

I have a menu bar which has several submenu items. The homepage contains a flash animation which is located under the menu bar. When the submenu items are over the flash file, the flash file will be displayed over the menu bar. I tried with z-index, but it won't work.

This problem only happens in IE.

Any tips?

Thanks

like image 540
seedg Avatar asked Jun 30 '10 07:06

seedg


Video Answer


6 Answers

Yes Chris,

You have to set an attribute to flash embed code

<param name="wmode" value="transparent" />

This will work

like image 186
BlueBird Avatar answered Oct 05 '22 07:10

BlueBird


Where you insert the flash file, you need to set the window mode to transparent:

<embed src="flashfile" wmode="transparent">
like image 26
Tim Avatar answered Oct 05 '22 07:10

Tim


Muneer and Tim already gave a good answer but I'd like to add some additional infos:

  • Adobe's website has a documentation about Flash OBJECT and EMBED tag attributes
  • transparent and opaque values will cause an accessibility problem, cause they hide the content of your flash object to screen readers. Only the default value of window is OK for screen readers
  • z-index won't and can't do anything in your case: the object is managed by a plugin, the flash player or an alternative, and it do so quite outside the page rendered by the browser. It still interacts with it (width, height, JS) but as for rendering ...
  • There is a similar issue with select elements in IE6 (and 7?) where no z-index value on a positioned element will render the latter over the select (this one is a bug due to the way IE considers select elements)
  • you should test on OS X and Linux, there are quite a few issues with flash on these OSes.
like image 27
FelipeAls Avatar answered Oct 05 '22 09:10

FelipeAls


There is a better solution to this as adding that parameter does not always work especially if using flash object within a div.

At the end of the page register the flash object like so:

<script type="text/javascript">
    swfobject.registerObject('FlashIdName');
</script>

Then call a javascript function like so:

<script type="text/javascript">
    swfobject.registerObject('FlashIdName');
    Chk_Flash('FlashIdName');
</script>

This function does the following:

<script type="text/javascript">
function Chk_Flash(ToRegister)
{
   document.getElementById('FlashIdName').style.visibility = 'visible';
   return true;
}
</script>

And this works on all browsers 100%


You can also use:

document.getElementById('FlashIdName').style.visibility = 'hidden';

Now if you are calling actions on the div tag like for example:

document.getElementById('MyDiv').style.visibility = 'block';

or document.getElementById('MyDiv').style.visibility = 'none';

What you need to do is first do the div action then call the flash visibilty in that order:

document.getElementById('MyDiv').style.display = 'block';
document.getElementById('FlashIdName').style.visibility = 'visible';

Enjoy !

like image 22
Ben Buhagiar Avatar answered Oct 05 '22 08:10

Ben Buhagiar


Use these value instead 'transparent':

wmode="opaque"
like image 22
Jerry Jones Avatar answered Oct 05 '22 09:10

Jerry Jones


I was finally able to find a solution which would work on both all the browers.

If I used

<param name="wmode" value="transparent" />

, I would get the desired output on IE but not on firefox and if i used

<embed wmode="transparent" ></embed>

, i got the desired output in firefox but not ie.

So I decided to use both which works on all the browsers

 <!--[if IE]>
    <param name="wmode" value="transparent" />
 <![endif]-->

 <embed wmode="transparent" ></embed>
like image 41
Oscprofessionals Avatar answered Oct 05 '22 09:10

Oscprofessionals