Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 10th, 2004, 01:55 AM
Authorized User
 
Join Date: Apr 2004
Location: , , .
Posts: 63
Thanks: 0
Thanked 0 Times in 0 Posts
Default hide drop down menu

hi! i'm using layers with my left navigation menu. when the user moves the pointer on navigation bar, another layer (menu2) pops up with more menus. however, i've added a drop down menu in the middle of my page. when i mouse over the navigation bar, the drop down menu appears on top of the other layer that pops up (menu 2). the drop down menu should be hidden. how can this be done? i already checked the z-index of the div layers..but i still can't hide the drop down menu. please help...
Reply With Quote
  #2 (permalink)  
Old December 10th, 2004, 05:35 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Windowed elements such as SELECT and, in earlier browsers, IFRAME are always a higher z-index than other elements, such as DIV.
The standard way to cope with this is to render the select box invisible when the other part is operational, assuming your SELECT has an id of "lstMenu":
Code:
function toggleDisplay(ElementId)
{
 var oElement = document.getElementById(ElementId);
  if (oElement.style.visibility == "visible")
  {
    oElement.style.visibility = "hidden";
  }
  else
  {
    oElement.style.visibility = "visible";
  }
}

toggleDisplay("lstMenu");
--

Joe (Microsoft MVP - XML)
Reply With Quote
  #3 (permalink)  
Old December 10th, 2004, 08:45 AM
Authorized User
 
Join Date: Apr 2004
Location: , , .
Posts: 63
Thanks: 0
Thanked 0 Times in 0 Posts
Default

hi! i created a new file for this. however, i get a javascript syntax error. what should i do? please see my code...

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>

<script language="JavaScript">
<!--

function toggleDisplay(ElementId)
{
 var oElement = document.getElementById(ElementId);
  if (oElement.style.visibility == "visible")
  {
    oElement.style.visibility = "hidden";
  }
  else
  {
    oElement.style.visibility = "visible";
  }
}

//-->
</script>


</head>

<body bgcolor="#FFFFFF">



<div id=layer1 style="position:absolute; top:30; left:20; width:300; height:300;
padding:5px; border: #000000 2px solid; background-color:#FFFFFF; z-index:2">
<form>
THIS IS LAYER 1
</form>
</div>

<div id=layer2 style="position:absolute; top:40; left:30; width:300; height:300;
padding:5px; border: #000000 2px solid; background-color:#000000; z-index:1">
  THIS IS LAYER 2
  <form name="form1">
    <select id="id1" name="menu1" onChange="MM_jumpMenu('parent',this,0)" >
      <option value="1">unnamed1</option>
      <option value="2">unnamed2</option>
    </select>
  </form>
</div>

<a href="#" onclick="toggleDisplay("id1");">click</a>
</body>
</html>


Reply With Quote
  #4 (permalink)  
Old December 10th, 2004, 09:01 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Code:
<a href="#" onclick="toggleDisplay("id1");">click</a>
Wrongly nested quotes, change to:
Code:
<a href="#" onclick="toggleDisplay('id1');">click</a>
By the way, never use "eval" it's highly resource intensive and not necessary. For example here:
Code:
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
What does the targ argument represent?



--

Joe (Microsoft MVP - XML)
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
disable the hide button in the pivot menu paul20091968 Excel VBA 0 June 29th, 2006 08:59 AM
How to hide combo box behind the popup menu? mohini ASP.NET 1.x and 2.0 Application Design 4 March 22nd, 2006 12:22 AM
right click menu hidden by drop-drown menu Andraw HTML Code Clinic 0 March 18th, 2005 03:28 PM
hide jump menu? lian_a Classic ASP Basics 8 December 10th, 2004 08:33 AM



All times are GMT -4. The time now is 08:33 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.