show/hide layer based on selected field value [Archive]

chelentano

02-21-2003, 09:39 PM

I am trying the fieldlayer to be visible when list options are selected (value 1) and I want to show forgroundlayer (initially visible) when no selection been made. I know my Javascript is messed up. Please help!

<html>
<head>
<title>Untitled Document</title>
<script language="JavaScript">
<!--
function checkValue() {
if field select="1" {
document.all.fieldlayer.style.visibility = "visible"
} else {
document.all.forgroundlayer.style.visibility = "hidden"
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="forgroundlayer" style="position:absolute; left:180px; top:285px; width:111px; height:27px; z-index:10; visibility: visible; background-color: #0099FF; layer-background-color: #0099FF; border: 1px none #000000" onMouseDown="checkValue()" >
</div>

<div id="fieldlayer" style="position:absolute; left:180px; top:285px; width:138px; height:32px; z-index:9; visibility: hidden" onMouseDown="checkValue()">
<select name="select" >
<option value="0"></option>
<option value="1">red apples</option>
<option value="1">green grapes</option>
<option value="1">watermelons</option>
</select>
</div>
</body>
</html>

dschnell

02-21-2003, 10:05 PM

I just did some very similar script.
If you want to be fully compliant for most browsers you need to do something like this:

// JavaScript Document
<script language="JavaScript" type="text/javascript">

function showOrHide(value) {
alert("showOrHide func called: " + value);

if (document.layers) {
////
/// Proprietary Navigator 4.x code

//---
myMenu=document.layers[value]; // these are the three ways you can
//myMenu=document.myElement; // access an element with N4.x
//myMenu=document.layers[0];
//---

////
/// accessing the Layer object properties....
//
myMenu.visibility='show';
}
else if (document.all && !document.getElementById) {
////
/// Proprietary IE4
//

//---
//myMenu=document.all["myElement"]; // these are the three ways you can
//myMenu=document.all.myElement; // access an element with IE4+

/// accessing the element style object properties...
//
value.style.visibility='visible';
}
else if (document.getElementById && document.body.style) {
/////
////
/// The Standards Compliant Way .. recommended.
//

myMenu=document.getElementById(value);

// using DOM HTML to set style properties.
myMenu.style.visibility="visible";

}
}
// -->
</script>

hope this helps.