...
PDA

controlling DIVs using JS

suhayda
03-10-2004, 11:22 PM
Basically I have a website that uses a lot of DIVs and I use radio buttons to make them appear and disappear as needed. All the navigation works fine, but whenever I use one of the buttons I get the following error message (when error messages is enabled in my browser) "document.cbTopRadioNav.rdo_prod" is null or not an object.
The following is a basic example for part of my website. Since I am new to javascript I will just post the whole thing and maybe someone here knows how to fix the problem.

Thanks a lot guys.

Peter


Code:


<html>
<head>
<title>xyy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="formate.css" rel="stylesheet" type="text/css">
</head>
<script language="JavaScript">
function navModuleChange(navModuleName) {

document.getElementById('cbamazon').style.display = 'none';
document.getElementById('cbebay').style.display = 'none';
document.getElementById('cbyahoo').style.display = 'none';
document.getElementById('cbmarketwatch').style.display = 'none';
document.getElementById('cbgoogle').style.display = 'none';
document.getElementById('cbXYZ').style.display = 'none';
document.getElementById(navModuleName).style.display = 'block';
(navigator.userAgent.indexOf("5.2")>-1) ? a_modOptions = document.getElementById(navModuleName).getElementsByTagName("select") : a_modOptions=false;
if(a_modOptions)for(i=0;i< a_modOptions.length;i++){
a_modOptions[i].focus();
a_modOptions[i].blur();
}
}

function radioSelect(selectId) {

var rdo = document.cbTopRadioNav.rdo_prod;
//alert(frames[0].location);
alert(document.URL);
if (selectId == "cbamazon") {rdo[0].checked=true;}
else if (selectId == "cbebay") {rdo[1].checked=true;}
else if (selectId == "cbyahoo") {rdo[3].checked=true;}
else if (selectId == "cbmarketwatch") {rdo[2].checked=true;}
else if (selectId == "cbgoogle") {rdo[4].checked=true;}
else if (selectId == "cbXYZ") {rdo[5].checked=true;}
}
function resetCbNav() {
for(i=0;i<document.cbTopRadioNav.elements.length;i++){
if(document.cbTopRadioNav.elements[i].checked)navModuleChange(document.cbTopRadioNav.elements[i].value)
}

}


</script>

<body bgcolor="#f5f5e5" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="45" align="left" valign="top" bgcolor="#284386"><table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="22%" height="45" align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width=111 height="45" valign="top">&nbsp;</td>
<td width=109 valign="middle"><table width="114" height="20" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95"><strong><font color="#F5F5E5" size="2" face="Verdana, Arial, Helvetica, sans-serif">SELECT
HERE </font></strong></td>
<td width="12"><img src="images/global_pics/20anidot2c.gif" width="12" height="12"></td>
</tr>
</table></td>
</tr>
</table>
<strong></strong></td>
<td width=10% align="left" valign="middle"><table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbamazon" onClick="navModuleChange(this.value); radioSelect(this.value);">
amazon </font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbmarketwatch" onClick="navModuleChange(this.value); radioSelect(this.value);">
marketwatch </font></td>
</tr>
</table></td>
<td width=10% align="left" valign="middle">
<table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" id="radio" value="cbebay" onClick="navModuleChange(this.value); radioSelect(this.value);">
ebay </font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbyahoo" onClick="navModuleChange(this.value); radioSelect(this.value);">
yahoo </font></td>
</tr>
</table></td>
<td width=12% align="left" valign="middle">
<table width="115" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="115"></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" id="radio1" value="cbgoogle" onClick="navModuleChange(this.value); radioSelect(this.value);">
google</font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbXYZ" onClick="navModuleChange(this.value); radioSelect(this.value);">
XYZ</font></td>
</tr>
<tr>
<td></td>
</tr>
</table> </td>
<td width=9% align="left">&nbsp;</td>
<td width=10% align="left">&nbsp;</td>
<td width="27%" align="right" valign="top"><img src="images/global_pics/cloud.jpg" width="70" height="40"></td>
</tr>
</table></td>
</tr>
</table>

<!-- amazon -->
<div id="cbamazon" style="display:block" width=100%>amazon
</div>
<!-- ebay -->

<div id="cbebay" style="display:none">
<table width=100%>

<tr>


<td> ebay </td>
</tr>
</table>
</div>
<!-- marketwatch -->
<div id=cbmarketwatch style="display:none" >
<table width=800 align=center>
<tr>

<td>marketwatch</td>
</tr>
</table>
</div>

<!-- yahoo -->
<div id=cbyahoo style="display:none;" width=100%>
<table width=800>

<tr>

<td> yahoo</td>
</tr>
</table>


<p>&nbsp;</p>
</div>


<!-- google -->
<div id=cbgoogle style="display:none">
<table width=800 align=center>
<tr>
<td width=800>
google</td>
</tr>
<tr>
<td width=100%>

</td>
</tr>
</table>
</div>
<!-- XYZ -->
<div id=cbXYZ style="display:none;" width=100%>
<table width=100%>

<tr>
<td>
XYZ

</td>
</tr>
</table>


<p>&nbsp;</p>
</div>
</body>
</html>
JAVAEOC
03-10-2004, 11:37 PM
This fixes ur code :D:

<html>
<head>
<title>xyy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="formate.css" rel="stylesheet" type="text/css">
</head>
<script language="JavaScript">
function navModuleChange(navModuleName) {

document.getElementById('cbamazon').style.display = 'none';
document.getElementById('cbebay').style.display = 'none';
document.getElementById('cbyahoo').style.display = 'none';
document.getElementById('cbmarketwatch').style.display = 'none';
document.getElementById('cbgoogle').style.display = 'none';
document.getElementById('cbXYZ').style.display = 'none';
document.getElementById(navModuleName).style.display = 'block';
(navigator.userAgent.indexOf("5.2")>-1) ? a_modOptions = document.getElementById(navModuleName).getElementsByTagName("select") : a_modOptions=false;
if(a_modOptions)for(i=0;i< a_modOptions.length;i++){
a_modOptions[i].focus();
a_modOptions[i].blur();
}
}

function radioSelect(selectId) {

var rdo = document.cbTopRadioNav.rdo_prod;
//alert(frames[0].location);
alert(document.URL);
if (selectId == "cbamazon") {rdo[0].checked=true;}
else if (selectId == "cbebay") {rdo[1].checked=true;}
else if (selectId == "cbyahoo") {rdo[3].checked=true;}
else if (selectId == "cbmarketwatch") {rdo[2].checked=true;}
else if (selectId == "cbgoogle") {rdo[4].checked=true;}
else if (selectId == "cbXYZ") {rdo[5].checked=true;}
}
function resetCbNav() {
for(i=0;i<document.cbTopRadioNav.elements.length;i++){
if(document.cbTopRadioNav.elements[i].checked)navModuleChange(document.cbTopRadioNav.elements[i].value)
}

}


</script>

<body bgcolor="#f5f5e5" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="45" align="left" valign="top" bgcolor="#284386"><table width="100%" height="45" border="0" cellpadding="0" cellspacing="0">
<tr valign="middle">
<td width="22%" height="45" align="left" valign="top"><table width="250" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width=111 height="45" valign="top"> </td>
<td width=109 valign="middle"><table width="114" height="20" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95"><strong><font color="#F5F5E5" size="2" face="Verdana, Arial, Helvetica, sans-serif">SELECT
HERE </font></strong></td>
<td width="12"><img src="images/global_pics/20anidot2c.gif" width="12" height="12"></td>
</tr>
</table></td>
</tr>
</table>
<strong></strong></td>
<td width=10% align="left" valign="middle"><table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<form name=cbTopRadioNav>
<input type="radio" name="rdo_prod" value="cbamazon" onClick="navModuleChange(this.value); radioSelect(this.value);">
amazon </font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbmarketwatch" onClick="navModuleChange(this.value); radioSelect(this.value);">
marketwatch </font></td>
</tr>
</table></td>

<td width=10% align="left" valign="middle">
<table width="100" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" id="radio" value="cbebay" onClick="navModuleChange(this.value); radioSelect(this.value);">
ebay </font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbyahoo" onClick="navModuleChange(this.value); radioSelect(this.value);">
yahoo </font></td>
</tr>
</table></td>
<td width=12% align="left" valign="middle">
<table width="115" height="35" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="115"></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" id="radio1" value="cbgoogle" onClick="navModuleChange(this.value); radioSelect(this.value);">
google</font></td>
</tr>
<tr>
<td><font color="#F5F5E5" size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="radio" name="rdo_prod" value="cbXYZ" onClick="navModuleChange(this.value); radioSelect(this.value);">
XYZ</font></td>
</tr>
<tr>
<td></td>
</tr>
</table> </td>
<td width=9% align="left"> </td>
<td width=10% align="left"> </td>
<td width="27%" align="right" valign="top"><img src="images/global_pics/cloud.jpg" width="70" height="40"></td>
</tr>
</table></td>
</tr>
</form>
</table>

<!-- amazon -->
<div id="cbamazon" style="display:block" width=100%>amazon
</div>
<!-- ebay -->

<div id="cbebay" style="display:none">
<table width=100%>

<tr>


<td> ebay </td>
</tr>
</table>
</div>
<!-- marketwatch -->
<div id=cbmarketwatch style="display:none" >
<table width=800 align=center>
<tr>

<td>marketwatch</td>
</tr>
</table>
</div>

<!-- yahoo -->
<div id=cbyahoo style="display:none;" width=100%>
<table width=800>

<tr>

<td> yahoo</td>
</tr>
</table>


<p> </p>
</div>


<!-- google -->
<div id=cbgoogle style="display:none">
<table width=800 align=center>
<tr>
<td width=800>
google</td>
</tr>
<tr>
<td width=100%>

</td>
</tr>
</table>
</div>
<!-- XYZ -->
<div id=cbXYZ style="display:none;" width=100%>
<table width=100%>

<tr>
<td>
XYZ

</td>
</tr>
</table>


<p> </p>
</div>
</body>
</html>


the thing u did wrong is that u were refering to a FORM: document.cbTopRadioNav

but you never had a form with the name of cbTopRadioNav so thats all i added :D
suhayda
03-11-2004, 12:21 AM
this saves me tons of time...
suhayda
03-11-2004, 12:30 AM
what does this do

alert(document.URL);

I get an alert with the URL of my page I am viewing. However it desn't work if I take this line out

??
suhayda
03-11-2004, 12:51 AM
thanks again

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum