PDA

Click to See Complete Forum and Search --> : Layers are not hidden when I run this script.

eshera
03-10-2004, 10:03 PM
Please help...
My page loads with a radio button already selected, no problem here, but it is one of 3 buttons. I need to get the value of the one checked 'onload' and show/hide one of three layers.

My short code:
function radioCheck(){

if (document.forms[0].rd[1].checked == true)
{
document.getElementById[table2].visibility = "show";
document.getElementById[table1].visibility = "hide";
document.getElementById[table3].visibility = "hide";
}
}
// -->
</script>
</head>
<body onLoad="radioCheck()">
<form name="radioform">
<input type="radio" name="rd" value="one">one
<input type="radio" name="rd" value="two" checked>two
<input type="radio" name="rd" value="three"> three
</form>
<div id="table1">table one</div>
<div id="table2">table two</div>
<div id="table2">table three</div>

Thank you so much...I've been at this forever!
eshera
Khalid Ali
03-10-2004, 10:21 PM
correct values for property visibility are
visibility="visible"
or
visibility="hidden"
Kor
03-11-2004, 03:19 AM
It is not only that, eshere, you mixted the DHTML method with NS4 method. If you want a crossbrowser code, try that:


<script>
function radioCheck(){
if(document.forms[0].rd[1].checked){
if(document.getElementById){//for IE5+, NS6+ and compatible
document.getElementById('table2').style.visibility = 'visible';
document.getElementById('table1').style.visibility = 'hidden';
document.getElementById('table3').style.visibility = 'hidden';
}
else if(document.all){//for IE4 and compatible
document.all['table2'].style.visibility = 'visible';
document.all['table1'].style.visibility = 'hidden';
document.all['table3'].style.visibility = 'hidden';
}
else if(document.layers){//for NS 4.x and compatible
document.layers['table2'].visibility = 'show';
document.layers['table1'].visibility = 'hide';
document.layers['table3'].visibility = 'hide';
}
}
}
</script>


And specify the CSS position (mainly for NS4.x):

<div style="position:absolute" id="table1">table one</div>
<div style="position:absolute" id="table2">table two</div>
<div style="position:absolute" id="table2">table three</div>
JayDie
03-11-2004, 04:31 AM
You can also completely remove the DIV (not really remove, but hide/remove)

Try this:

objDIV.display='none'
objDIV.display='block'

JayDie