|
Subject:
|
hide drop down menu
|
|
Posted By:
|
lian_a
|
Post Date:
|
12/10/2004 12:55:06 AM
|
|
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 By:
|
joefawcett
|
Reply Date:
|
12/10/2004 4:35:00 AM
|
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":
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 By:
|
lian_a
|
Reply Date:
|
12/10/2004 7:45:30 AM
|
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 By:
|
joefawcett
|
Reply Date:
|
12/10/2004 8:01:37 AM
|
<a href="#" onclick="toggleDisplay("id1");">click</a>
Wrongly nested quotes, change to:
<a href="#" onclick="toggleDisplay('id1');">click</a>
By the way, never use "eval" it's highly resource intensive and not necessary. For example here:eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
What does the targ argument represent?
--
Joe (Microsoft MVP - XML)
|
