JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

DHTML & Javascript menu - trouble with z-index

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2005
Posts: 4
Reputation: jpmad4it is an unknown quantity at this point 
Solved Threads: 0
jpmad4it jpmad4it is offline Offline
Newbie Poster

DHTML & Javascript menu - trouble with z-index

 
0
  #1
Mar 30th, 2007
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2005
Posts: 1,181
Reputation: hollystyles will become famous soon enough hollystyles will become famous soon enough 
Solved Threads: 67
hollystyles's Avatar
hollystyles hollystyles is offline Offline
Veteran Poster

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

 
0
  #2
Mar 30th, 2007
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.
==========================================
Yadda yadda yadda...
Web junky, fevered monkey
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 4
Reputation: jpmad4it is an unknown quantity at this point 
Solved Threads: 0
jpmad4it jpmad4it is offline Offline
Newbie Poster

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

 
0
  #3
Mar 30th, 2007
•
•
•
•
Originally Posted by hollystyles View Post
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Feb 2005
Posts: 355
Reputation: DanceInstructor is an unknown quantity at this point 
Solved Threads: 14
DanceInstructor's Avatar
DanceInstructor DanceInstructor is offline Offline
Posting Whiz

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

 
0
  #4
Mar 30th, 2007
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.
Clear Mind Hosting and Web Design

If I've helped you please consider adding to my reputation.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2005
Posts: 4
Reputation: jpmad4it is an unknown quantity at this point 
Solved Threads: 0
jpmad4it jpmad4it is offline Offline
Newbie Poster

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

 
0
  #5
Apr 2nd, 2007
•
•
•
•
Originally Posted by jpmad4it View Post
hey thanks, but it didnt work
I had to add it to both the embed and object elements - it now works :cheesy:
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically browser bug calendar captchaformproblem cart checkbox child close codes createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine enter events explorer ext file firefox form forms frameworks getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump libcurl maps masterpage math media microsoft object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar prototype redirect regex runtime safari scale scriptlets scroll search security shopping size software sql text textarea unicode web website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC