Dhtml, Select, and Javascript Hmm... [Archive]

vaporal

04-26-2003, 04:59 AM

Ok first things first...

<script language="javascript">

</script>
<style>
#nav{position:absolute; top:634; left:433;}
#DOGFOOT{position:absolute; visibility:hidden; top:1; left:766;}

</style>
</head>
<body background="back.jpg" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
<div id="dogfoot">
<h1>TEST</h1>
</div>

<div id="nav">
<form method="post" action="">
<select name="select" onChange="navfunk(this.options[this.selectedIndex].value)" style="background-color:#CCCCCC; border-style:0px; font-size:10; font-family:arial; width:249px">

<option value="DOGFOOT">*** Navigation **************</option>
<option value="DOGFOOT">1. Great Book of the Animal Kingdom</option>
<option value="DOGFOOT">2. People just don't breath, You know?</option>
<option value="DOGFOOT">3. Flipper Bear Flower Solution</option>
<option value="lady/index.html">4. Electric Contact</option>
</select>
</form>
</div>
<img src="test.jpg">
</html>

What I Would like to happen =
When the user seleects an option from the form it makes its corresponding div layer visible.

At the moment this setup isn't working and I definately don't have the programming ability to know why or even fully understand what is happening. I'd appreciate any help thanks.
/rich

khalidali63

04-26-2003, 07:12 AM

You had some errors in the code. check this out.

function navfunk(THEID) {
isVisible=(document.getElementById(THEID).style.visibility!='visible') ? 'visible' : 'hidden';
document.getElementById(THEID).style.visibility=isVisible;
}

function navfunk2(ID){
eval(document.ID.style.visibility = "hidden");
}
</script>
<style>
#nav{position:absolute; top:634; left:433;}
#DOGFOOT{position:absolute; visibility:hidden; top:1; left:766;}

</style>
</head>
<body background="back.jpg" marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
<div id="dogfoot1" style="visibility:hidden;">
<h1>dogfoot 1</h1>
</div>
<div id="dogfoot2" style="visibility:hidden;">
<h1>dogfoot 2</h1>
</div>
<div id="dogfoot3" style="visibility:hidden;">
<h1>dogfoot 3</h1>
</div>
<div id="dogfoot4" style="visibility:hidden;">
<h1>dogfoot 4</h1>
</div>

<div id="nav">
<form method="post" action="">
<select name="select" onChange="navfunk(this.options[this.selectedIndex].value)" style="background-color:#CCCCCC; border-style:0px; font-size:10; font-family:arial; width:249px">

<option value="-1">*** Navigation **************</option>
<option value="dogfoot1">1. Great Book of the Animal Kingdom</option>
<option value="dogfoot2">2. People just don't breath, You know?</option>
<option value="dogfoot3">3. Flipper Bear Flower Solution</option>
<option value="dogfoot4">4. Electric Contact</option>
</select>
</form>
</div>

1. your options values were in caps "DOGFOOT"
while your div id = "dogfoot"
2. you had isVisible and IsVisible
3. your condition to get value for isVisible was not setting the correct values.