944,144 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > DHTML & Javascript menu - trouble with z-index
Ad:
Permalink
Mar 30th, 2007
0

DHTML & Javascript menu - trouble with z-index

Expand Post »
Hello everyone,

I have built a DHTML & Javascript menu using the Deluxe Menu (www.deluxe-menu.com) software package.

The problem is that in IE7 the menu works fine, yet in Firefox it is displayed behind everything.

If you look here using IE and Firefox you can see the difference when you drop down the 'services' box in the menu:

www.boxroom-media.com/test/johnny3

I tried to resolve this by using CSS. I set the 2 classes 'flash' and 'menu', and I then set the Flash z-index to -1 and the menu z-index to 1 ( I also set the positioning for both of these to absolute). This didnt work

So I then tried to edit the Javascript file that controls the menu. This has all the variables that are needed for the menu. In the script I added the following under the positoning section:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var zIndex="1";

I also kept the flash z-index to -1, but again this didnt work!

Finally, i tried to add a javascript function directly into the code to try and change the z-index of the menu when the page loaded up. I used the following code:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. function changeStackOrder()
  3. {
  4. document.getElementById("menu").style.zIndex="1";
  5. }
  6. </script>

I then set the function to execute on the load of the body:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <body onLoad="changeStackOrder()">

I also made sure the ID of the menu was set to 'menu' so that the function executed on the menu. Again this didnt work.

Can anyone help me out? Is it just a problem with Firefox and that it can't handle the z-index property?

Any help would be greatly appreciated.

regards,
Jp
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jpmad4it is offline Offline
4 posts
since Jun 2005
Permalink
Mar 30th, 2007
0

Re: DHTML & Javascript menu - trouble with z-index

try adding <param name="wmode" value="transparent"> into this section:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="200" title="intro">
  2.       <param name="movie" value="Flash/intro.swf">
  3.       <param name="quality" value="high">
  4.       <embed src="Flash/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="200" ></embed>
  5.     </object>
Last edited by hollystyles; Mar 30th, 2007 at 1:19 pm.
Reputation Points: 262
Solved Threads: 68
Veteran Poster
hollystyles is offline Offline
1,181 posts
since Feb 2005
Permalink
Mar 30th, 2007
0

Re: DHTML & Javascript menu - trouble with z-index

Click to Expand / Collapse  Quote originally posted by hollystyles ...
try adding <param name="wmode" value="transparent"> into this section:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="200" title="intro">
  2.       <param name="movie" value="Flash/intro.swf">
  3.       <param name="quality" value="high">
  4.       <embed src="Flash/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="200" ></embed>
  5.     </object>
hey thanks, but it didnt work
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jpmad4it is offline Offline
4 posts
since Jun 2005
Permalink
Mar 30th, 2007
0

Re: DHTML & Javascript menu - trouble with z-index

You have not declared a doctype for this page. This leaves each browser to decide how it will render the page (quirks mode) vs following standards (standards mode). Declaring a doctype may make FF start paying attention to your z-index declarations. Doctypes: http://www.w3schools.com/tags/tag_doctype.asp

I think this menu will be bad for SEO as most search engines probably wont be able to see the links in the menu. Also by using this menu you FORCE your viewers/users to enable javascript to browse the site. IMO you should try something else.

I have used and like FreeStyle Menus, you can find it here: http://www.twinhelix.com/dhtml/fsmenu/
FreeStyle Menus use javascript, but degrade gracefully if javascript isnt available. The actual links to your pages are on the page on document load as well, so search engines will be able to see other pages on your site.
Reputation Points: 17
Solved Threads: 14
Posting Whiz
DanceInstructor is offline Offline
355 posts
since Feb 2005
Permalink
Apr 2nd, 2007
0

Re: DHTML & Javascript menu - trouble with z-index

Click to Expand / Collapse  Quote originally posted by jpmad4it ...
hey thanks, but it didnt work
I had to add it to both the embed and object elements - it now works :cheesy:
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jpmad4it is offline Offline
4 posts
since Jun 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: SQL Databinding using Javascript
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC