PDA

View Full Version : Chrome CSS Drop Down Menu help



Mr_Blik
04-22-2007, 08:12 AM
Chrome CSS Drop Down Menu

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm


Hello;

I have been using this script with a great deal of success and client approval for the last 6 months, but have recently run into a problem. While testing the script in Firefox, the drop-down portion of the menu appears behind the flash header which is rotating images below it, while in IE 6.0+ the drop down portion of the menu appears above the flash header without any problems.

I am using a flash version / availability detection script (in JavaScript) and a flashObject script which loads the flash in a different way as to ensure it doesn't need to be activated by clicking on the activeX control.

The code is:

<!-- Flash Header Start //-->
<td align="left" valign="top" colspan="3">
<!-- Import Flash IE Active Content Fix //-->
<script type="text/javascript" src="js/flashobject.js"></script>
<!-- Detect Flash plugin and version then supply appropriate content //-->
<script language="JavaScript" type="text/javascript">
<!--
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// Create place for Flash Content
var oeTags = '<div id="flashcontent" style="width: 500px; height: 211px;"></div>';
document.write(oeTags);
// IE Flash Content Fix
var fo = new FlashObject("flash/headerSlideshow.swf", "animationName", "500", "211", "6", "#FFFFFF");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "false");
fo.write("flashcontent");
} else { // flash is too old or we can't detect the plugin
var alternateContent = '<img src="images/mainPicture_1.jpg" width="500" height="211" border="0" alt="Turks and Caicos">';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<!-- Alternative content for non-JavaScript browsers or browsers with JavaScript turned off //-->
<noscript>
<img src="images/mainPicture_1.jpg" width="500" height="211" border="0" alt="Turks and Caicos">
</noscript>
</td>
<!-- Flash Header End //-->

I am using the method described in the script tutorial to display the menu.

Can anyone tell me why Firefox would refuse to display the drop-down menu above the header, while IE has no problem doing it?


Thank you in advance.

Mr_Blik

Mr_Blik
04-22-2007, 03:35 PM
Hello All;

Just got it to work and thought I'd share with the group.

In the HTML document displaying the Flash movie and drop down menu do the following:

To the Object tag, add the following parameter:
<param name="wmode" value="opaque">

To the Embed tag, add the following attribute:
wmode="opaque"

For a full explination as to wmode and flash accessibility there's a great article here:
http://www.communitymx.com/content/article.cfm?cid=E5141&print=true

Mr_Blik