SilentGap

Ok, for all of you that like to laugh, here’s a new scam (or an old one, repackaged). As many of you know, I’m all mac now, at home and at work. I also set up Google Alerts for my work and church (and a few other things too). Well, spammers (or a new breed) are now setting up plain sites that have business names in it, there’s no text, just a really long title, with all of the business names. » Read the rest of this entry «

Ok, so the documentation below has been contributed by a number of people. I’ll try to give credit where credit is due.

The following article describes in detail the problems and solutions behind the JavaScript rollover menu falling behind a flash element embedded on a web page.

Issue

---

The layout requests the use of a JavaScript dropdown menu. Everything works fine until there’s a Flash (or Java Applet) object embedded on the page just below the navigation. When the user rolls over the navigation and the dropdown is invoked, the dropdown falls behind the flash object instead of over.

Reason

---

From various sources on a Google search it sounds like there may be a few different explanations from this problem – very few of those sources come with good documentation. So far this is what has been found. From further research, it appears that all of these reasons may be playing a part.

The two that seems to have the most impact are below:

1. Flash – By default, a flash movie doesn’t actually play within the browser. Instead it’s given it’s own window, giving flash the power to render it’s files independent of the browser abilities, thereby increasing the performance of the object. Because of this, Flash then “floats” it’s movie over the browser to make it appear within the browsers window.
2. CSS – It all goes back to the div’s. When working with a dropdown DHTML menu, it needs to hover over all other objects & page elements, displaying the ‘hover over’ appearance to the user. The rules still apply, trying to ask a <div> / <ul> menu to display over a parent / higher ranking menu doesn’t work unless you obey the CSS gods.

A further note on the Adobe Flash issue, there is a parameter you can set that will change how flash is rendered. It’s with the ‘wmode’ parameter. Below are the three options you can set and an explanation of what each option does.

1. Window (default) mode [example] – This is the mode that’s described above in point one. It’s usually the fastest performing setting and is the way Flash worked before version 6 (it think – don’t have a reference to back this up, but remember reading it somewhere).
2. Opaque mode [example] – This enables a ‘windowless’ mode which “means that the browser tells the Flash Player when and where to draw onto the browser’s own rendering surface.” When this mode is set, it will now accept CSS values and positioning.
3. Transparent mode [example] – This mode is similar to the “Opaque” mode, in that it gives the control back to the browser, different in that “the Flash Player zeros the alpha of the movie background color and draws only the parts of the Flash stage that contain actual objects.”1 This will come in handy if you have a flash move that’s not square or is irregular shaped in some way. The other drawback is that this mode can cause the Flash rendering performance to go down. NOTE: “If you have overlayed your Flash movie on top of a DHTML layer containing a text field, you will not be able to get the focus to go to the text field. Each time you click on the text field, the Flash movie will grab the focus. Though I did not experiment with this, Scott Barnes from MossyBlog suggests you may want to swap the z-indexes when you no longer need the overlayed Flash movie.”1
   

NOTE: “Windowless Mode is available by publishing for Flash Player 6 or 7 in the following browsers:”

• Windows
  

• IE

• Netscape 7.0

• AOL
• FireFox *.*
  

Mac OS X

• Mozilla 1.0
• IE 5.1 & 5.2
• Netscape 7.0
• AOL
• Mozilla 1.0
• CompuServe
• FireFox *.*
  

Linux – Your guess is as good as mine

Solution

---

“You may have read that to change the mode, you should go back into Flash and republish your Flash movie. That’s not necessary. If you haven’t yet published your Flash movie, certainly use the publish settings dialog box to choose your wmode setting. That option is in the HTML tab of the Publish Settings. Choose either transparent windowless or opaque windowless in the tab and publish the document.”1

You’ll have to change the two Flash tags or if using the SWFObject JavaScript file – it will change both of them for you.

• Param Tag – <param name=”wmode” value=”opaque”>
• Embed tag – <object wmode=”opaque”>
• SWFObject – add to your script tag, just after the new SWFObject(); function

• so.addParam(“wmode”, “opaque”);

Next, you’ll have to make sure you’re dynamic dropdown menu is on the same level as the flash file level. Suggestion, create a placeholder image to mimic your flash and get the dropdown to hover over the image first, and then work with the flash.

You can control this with setting both the menu class and flash class files to position: and then setting the z-index higher for the menu div than the flash div.

There’s a good chance this still won’t work due to the amount of different div levels in between the actual menu and the flash movie, so you may have to use the following hack to get around this problem.

For your Navigation code -

==========================
<ul id=”nav”>
<li><a href=”">Link 1</a>
<ul>
<li><a href=”">Child 1</a></li>
<li><a href=”">Child 2</a></li>
</ul>
</li>
<li><a href=”">Link 2</a>
<ul>
<li><a href=”">Child 1</a></li>
<li><a href=”">Child 2</a></li>
</ul>
</li>
<li><a href=”">Link 3</a></li>
</ul>
<div id=”flashContent”>
<img src=”/images/photo.jpg” width=”300″ height=”300″ border=”0″ alt=”" />
</div>
<script type=”text/javascript”>
// <![CDATA[
var so = new SWFObject("/flash/flashfile.swf", "flashContent", "300", "300", "7", "#FF6600");
so.addParam("wmode", "transparent");
so.write("flashContent");
// ]]>
</script>
=========================

Then in your CSS – set your dropdown as below (you can add additional attributes as you see fit.)

=========================
#nav li ul {
position:absolute;
z-index: 20; /*or as long as this z-index value is higher than the flash div. So this value could be 2 if the flash div z-index value is 0 or 1 */ /* reference note below*/
}

#flashContent {
position:relative;
z-index: 10; /* reference Note below*/
display:inline;
float:right;
}
=========================

Then, in your body, create a placeholder div that will frame out the section you want to display the flash movie

=========================
#flash_place_holder {
width:300px;height:300px;
}
=========================

Note: You’ll want to set the z-index of the flash content to a value higher than zero in order to be able to access content in the flash. Along with that make sure you keep the z-index of the navigation higher than the flash content.

Once the placeholder is positioned in the correct location, go back and float your Flash div over the placeholder. The use of 1px borders really help when trying to place the flash in the exact position.

Also, it doesn’t seem that this problem can be fixed by setting the z-index when the menu and flash are in separate container div’s. The z-index seems only to change the values within a containing wrapper and not ones outside of that containing wrapper.

IE.
=========================
<div id=”header_containing_wrapper”>
<div id=”nav_wrapper”>
<ul id=”nav”> <!– Setting the z-index on this guy doesn’t seem to impact the id=”flash_container“ in the id=“body_containing_wrapper“ but it does in the id=”header_containing_wrapper” id=”flash_container” b/c it’s in the same containing div tag –>
<etc></etc>
</ul>
<div id=”flash_container”> <!– impacted by z-index set from the id=”nav” –>
</div>
</div>
</div>
<div id=”body_containing_wrapper”>
<div id=”right_col”>
</div>
<div id=”left_col”>
<div id=”flash_container”> <!– Not impacted by z-index set from the id=”nav” –>
</div>
</div>
</div>
=========================

If you find any additional hacks or other information that needs to modified or added – please feel free to do so.

Sources & Original Articles:

1. http://www.communitymx.com/content/source/E5141/
2. http://www.adobe.com/go/tn_15523
3. People who have contributed to this documentation are myself, and two guys that I work with, Chris Lukenbill and Ben Bertrand – as well as some influence by a few other gentlemen from Blend Interactive.