Jump to content
Sign in to follow this  
newseed

Flash hiding contents

Recommended Posts

I cannot get this flash to be behind the menu and the round logo. I have tried some of the solutions on the net to no avail but those solution were more than 3 years old. I am using the script SWBOject to display the flash which validates but it is hiding my contents. I have set the wmode value to transparent but still did not change.http://www.papaez.com/default2.aspAny suggestions?

Share this post


Link to post
Share on other sites

This is the generated code for the Flash movie, there's no wmode parameter set:

<DIV id="flashbox"><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="752" height="220">  <PARAM name="movie" value="hme_flsh.swf">  <PARAM name="quality" value="high">  <EMBED src="hme_flsh.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="752" height="220"></OBJECT></DIV>

If setting wmode doesn't work, you might just want to add the bottom part of the logo to the Flash.

Share this post


Link to post
Share on other sites

This issue is also the CSS drop down menu that hides behind the flash. wmode transparet didn't work.I've added my changes to date: http://www.thekaspergroup.com/tools/papa-e...pa-template.htmI intentionally drop the flash down a few pixels as well as the logo. You can see the green portion of the menu dropdown when you hover but it hides behind the flash. The logo is also intentionally push down to show how the logo is behind the flash hence the flash is not laying over the header background.

Share this post


Link to post
Share on other sites

The <object> and <iframe> elements always go in front of everything else and CSS can't change their z-index. I usually use Javascript to make the visibility hidden when opening a menu that might go in front of an iframe or object.

Share this post


Link to post
Share on other sites

You might also consider making the menus part of the Flash, or moving the Flash above the menus.

Share this post


Link to post
Share on other sites

Can you shed some more light on this solution. I haven't found anything on the net other than solutions that were dated years ago which they did not work.

Share this post


Link to post
Share on other sites

You can't get a Flash movie beneath HTML elements. Simple. You'll need to get the other things around it or split your Flash up, or not use Flash.

Share this post


Link to post
Share on other sites

I managed to get it closer to getting it to work. From what I can see, it works in FF for both the round logo and the dropdown menu. However, in IE, the round logo does indeed work but the dropdown menu does not.You can see the results here .If I don't use the <object> tag and just use <embed>, it works fine which allows the round logo and menu to show through. Of course I know this does not validate but it work except the menu in IE.I'd be williing to use a CSS menu with some javascript if I thought it will work.I am open for suggestions.

Share this post


Link to post
Share on other sites

Last time I needed to do something like that I added a Javascript something like this:HTML:<a onmouseover="hideObjects()" onmouseout="showObjects()" href="java script: void(0)">This link opens the menu</a>Javascript functions:

function hideObjects() {  var O = document.getElementsByTagName("object");  for (var i=0; i<O.length; i++) {	O[i].style.visibility = "hidden";  }}function showObjects() {  var O = document.getElementsByTagName("object");  for (var i=0; i<O.length; i++) {	O[i].style.visibility = "visible";  }}

Share this post


Link to post
Share on other sites

It was ineffective unless I did not incorporated the script right:HTML:

<div id="lefthand-menu"><ul class="nav"><li class="noborder"><a onmouseover="hideObjects()" onmouseout="showObjects()" href="java script: void(0)"><img alt="About Us" src="../images/about-us-button.png" width="62" height="12"><!--[if gte IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->	<ul class="flyright-1">		<li class="noborder"><a href="#">Papa E'z Story </a></li>		<li><a href="#">Store Location</a></li>		<li><a href="#">Employment Opportunities</a></li>		<li><a href="#">Contact Us</a></li>		<li><a href="#">Papa E’z Apparel</a></li>	</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div>

I'd placed the javascript between the <head></head> tags:

		<script type="text/javascript"><!--function hideObjects() {  var O = document.getElementsByTagName("object");  for (var i=0; i<O.length; i++) {	O[i].style.visibility = "hidden";  }}function showObjects() {  var O = document.getElementsByTagName("object");  for (var i=0; i<O.length; i++) {	O[i].style.visibility = "visible";  }}//--></script>

Share this post


Link to post
Share on other sites

The script doesn't open the menu, it just hides the flash elements. The CSS should take care of opening the menu.Actually, you might be better off putting the onmouseover and onmouseout attributes on the parent <li> tag instead.

Share this post


Link to post
Share on other sites

If you are implying to move the onmouseover and onmouseout attributes with the <li> instead of the <a> then I have done that to no avail. Originally, I had that line of code within the <a> tag that is within the parent <li> tag.

Share this post


Link to post
Share on other sites

In addition to my last post, when I placed the code the way I did the first time, I realized that it did indeed hide the flash in FF and other browser but it never worked for IE.Keep in mind that I only applied this to just the About Us menu. Each menu is seperate and so the About Us is the only I am applying this script to.

Share this post


Link to post
Share on other sites

I managed (by trial and error) to final get it to work. Don't ask how but all I know is that it has something to do with the CSS and the html code for the flash.Unfortunately, it doesn't validate because it has to use <embed>Here's the updated page: Working copyNo script were used.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...