harrisonness
asked on
Using DIV tags and Javascript to control what appears
Hi Experts
I have been using some code supplied by Fritz_the_Blank. And individually I can get each piece to work but when I combine them it doesn't work as intented. One piece is a tabbed form and the other is content displayed based on a list box for the field "type". Ideally on tab one when you select the "type" from the list menu the content on tab two would change accordingly. But all I get is all the content on tab two rather than just the piece needed. I'm sure it's something simple that I'm missing but it's got me stumped.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<script type="text/javascript" src="../js/toggleTabs.js"> </script>
<script type="text/javascript" src="../js/toggleText.js"> </script>
<body onLoad="toggleTabs(1)">
<table height="28" border="0" cellpadding="0" cellspacing="0" class="tabs" summary="">
<td width="84" onClick='toggleTabs(1)'>Ov erview</td >
<td width="84" onClick='toggleTabs(2)'>De tails</td>
<td width="84" onClick='toggleTabs(3)'>Ta sks</td>
<td width="84" onClick='toggleTabs(4)'>No tes</td>
</table>
<form name="form1" method="post" action="">
<tr>
<td bgcolor="#FFFFFF"><div id="divTab1">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" >Job Number </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Client</td>
<td class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Client Contact </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Job Title</td>
<td class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Type</td>
<td class="form" ><select name="" size=1 onChange="toggleText(this. selectedIn dex)">
<option value="none" selected>-- choose --</option>
<option value="1">Press</option>
<option value="2">TVC</option>
<option value="3">Radio</option>
<option value="4">Print</option>
<option value="5">Ambient Media</option>
<option value="6">Electronic Media</option>
</select></td>
</tr>
<tr valign="top">
<td class="form" >Start Date</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Due Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Status</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>in progress</option>
<option>hold</option>
<option>completed</option>
<option>archived</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Brief</td>
<td class="form" ><textarea name="textfield" rows="5" wrap="VIRTUAL"></textarea> </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Workgroup</td>
<td class="form" ><select name="select" size="5" multiple>
<option>Clive Anthonys</option>
<option>HarrisonNess</opti on>
<option>Mitchell Media</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Archive Disk </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divTab2">
<div id="divText0"> </div>
<div id="divText1">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Press</strong></t d>
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Section</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><select name="select">
<option selected>-- choose --</option>
<option>mono/b+w</option>
<option>spot</option>
<option>multi spot</option>
<option>full colour</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Size</td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication Date </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Media</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText2">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>TVC</strong></td>
<td class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Product</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Duration</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>5 sec</option>
<option>10 sec</option>
<option>15 sec</option>
<option>30 sec</option>
<option>45 sec</option>
<option>billboard</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >First Air Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText3">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Radio</strong></t d>
<td class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Product</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Duration</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>5 sec</option>
<option>10 sec</option>
<option>15 sec</option>
<option>30 sec</option>
<option>45 sec</option>
<option>billboard</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >First Air Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText4">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Print</strong></t d>
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Flat Size </td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Finished Size </td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Number of Pages </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Stock</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Colours</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Varnish</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Diecutting</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Special Finishes</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Construction</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Special Requirements </td>
<td colspan="2" class="form" ><textarea name="textfield" rows="5" wrap="VIRTUAL"></textarea> </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Delivery Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<span class="form"> </span>
<div id="divText5">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Ambient Media </strong></td>
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><select name="select">
<option selected>-- choose --</option>
<option>metrolite</option>
<option>d'Lite</option>
<option>supersite</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication Date </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Media</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
I have been using some code supplied by Fritz_the_Blank. And individually I can get each piece to work but when I combine them it doesn't work as intented. One piece is a tabbed form and the other is content displayed based on a list box for the field "type". Ideally on tab one when you select the "type" from the list menu the content on tab two would change accordingly. But all I get is all the content on tab two rather than just the piece needed. I'm sure it's something simple that I'm missing but it's got me stumped.
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<script type="text/javascript" src="../js/toggleTabs.js">
<script type="text/javascript" src="../js/toggleText.js">
<body onLoad="toggleTabs(1)">
<table height="28" border="0" cellpadding="0" cellspacing="0" class="tabs" summary="">
<td width="84" onClick='toggleTabs(1)'>Ov
<td width="84" onClick='toggleTabs(2)'>De
<td width="84" onClick='toggleTabs(3)'>Ta
<td width="84" onClick='toggleTabs(4)'>No
</table>
<form name="form1" method="post" action="">
<tr>
<td bgcolor="#FFFFFF"><div id="divTab1">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" >Job Number </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Client</td>
<td class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Client Contact </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Job Title</td>
<td class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Type</td>
<td class="form" ><select name="" size=1 onChange="toggleText(this.
<option value="none" selected>-- choose --</option>
<option value="1">Press</option>
<option value="2">TVC</option>
<option value="3">Radio</option>
<option value="4">Print</option>
<option value="5">Ambient Media</option>
<option value="6">Electronic Media</option>
</select></td>
</tr>
<tr valign="top">
<td class="form" >Start Date</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Due Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Status</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>in progress</option>
<option>hold</option>
<option>completed</option>
<option>archived</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Brief</td>
<td class="form" ><textarea name="textfield" rows="5" wrap="VIRTUAL"></textarea>
</tr>
<tr valign="top">
<td width="150" class="form" >Workgroup</td>
<td class="form" ><select name="select" size="5" multiple>
<option>Clive Anthonys</option>
<option>HarrisonNess</opti
<option>Mitchell Media</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Archive Disk </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divTab2">
<div id="divText0"> </div>
<div id="divText1">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Press</strong></t
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Section</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><select name="select">
<option selected>-- choose --</option>
<option>mono/b+w</option>
<option>spot</option>
<option>multi spot</option>
<option>full colour</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Size</td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication Date </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Media</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText2">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>TVC</strong></td>
<td class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Product</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Duration</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>5 sec</option>
<option>10 sec</option>
<option>15 sec</option>
<option>30 sec</option>
<option>45 sec</option>
<option>billboard</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >First Air Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText3">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Radio</strong></t
<td class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Product</td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Duration</td>
<td class="form" ><select name="select">
<option selected>-- choose --</option>
<option>5 sec</option>
<option>10 sec</option>
<option>15 sec</option>
<option>30 sec</option>
<option>45 sec</option>
<option>billboard</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >First Air Date </td>
<td class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<div id="divText4">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Print</strong></t
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Flat Size </td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Finished Size </td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="depth"></td>
<td class="form" ><input name="textfield" type="text" class="smallinput" value="width"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Number of Pages </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Stock</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Colours</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Varnish</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Diecutting</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Special Finishes</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Construction</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Special Requirements </td>
<td colspan="2" class="form" ><textarea name="textfield" rows="5" wrap="VIRTUAL"></textarea>
</tr>
<tr valign="top">
<td width="150" class="form" >Delivery Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
<span class="form"> </span>
<div id="divText5">
<table cellpadding="5" cellspacing="0" summary="">
<tr valign="top">
<td width="150" class="form" ><strong>Ambient Media </strong></td>
<td colspan="2" class="form" > </td>
</tr>
<tr valign="top">
<td width="150" class="form" >Style</td>
<td colspan="2" class="form" ><select name="select">
<option selected>-- choose --</option>
<option>metrolite</option>
<option>d'Lite</option>
<option>supersite</option>
</select></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Material Deadline </td>
<td colspan="2" class="form" ><input type="text" name="textfield">
</td>
</tr>
<tr valign="top">
<td width="150" class="form" >Publication Date </td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
<tr valign="top">
<td width="150" class="form" >Media</td>
<td colspan="2" class="form" ><input type="text" name="textfield"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
ASKER
Sorry..obviously knowing that would be a help.
toggleTabs.js has:
//======================== ========== ========== ========== =
//detect browser settings for showing and hiding DIVs
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
//======================== ========== ========== ========== =
function switchDiv(strDivName,bolVi sible){
//identify the element based on browser type
if (isNS4) {
objElement = document.layers[strDivName ];
} else if (isIE4) {
objElement = document.all[strDivName].s tyle;
} else if (isIE5 || isNS6) {
objElement = document.getElementById(st rDivName). style;
}
if(isNS4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
}else if(isIE4){
if(!bolVisible) {
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.display = "none";
} else {
objElement.display = "";
}
}
}
function toggleTabs(intVisible){
for(i=1;i<5;i++){
if(i==intVisible){
switchDiv("divTab " +i,true);
}else{
switchDiv("divTab " +i,false);
}
}
}
ToggleText.js has:
//======================== ========== ========== ========== =
//detect browser settings for showing and hiding DIVs
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
//======================== ========== ========== ========== =
function switchDiv(strDivName,bolVi sible){
//identify the element based on browser type
if (isNS4) {
objElement = document.layers[strDivName ];
} else if (isIE4) {
objElement = document.all[strDivName].s tyle;
} else if (isIE5 || isNS6) {
objElement = document.getElementById(st rDivName). style;
}
if(isNS4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
}else if(isIE4){
if(!bolVisible) {
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.display = "none";
} else {
objElement.display = "";
}
}
}
function toggleText(intSelected){
for(i=0;i<3;i++){
if(i==intSelected){
switchDiv('divTex t'+i,true) ;
}else{
switchDiv('divTex t'+i,false );
}
}
}
Thanks :)
toggleTabs.js has:
//========================
//detect browser settings for showing and hiding DIVs
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
//========================
function switchDiv(strDivName,bolVi
//identify the element based on browser type
if (isNS4) {
objElement = document.layers[strDivName
} else if (isIE4) {
objElement = document.all[strDivName].s
} else if (isIE5 || isNS6) {
objElement = document.getElementById(st
}
if(isNS4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
}else if(isIE4){
if(!bolVisible) {
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.display = "none";
} else {
objElement.display = "";
}
}
}
function toggleTabs(intVisible){
for(i=1;i<5;i++){
if(i==intVisible){
switchDiv("divTab
}else{
switchDiv("divTab
}
}
}
ToggleText.js has:
//========================
//detect browser settings for showing and hiding DIVs
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
//========================
function switchDiv(strDivName,bolVi
//identify the element based on browser type
if (isNS4) {
objElement = document.layers[strDivName
} else if (isIE4) {
objElement = document.all[strDivName].s
} else if (isIE5 || isNS6) {
objElement = document.getElementById(st
}
if(isNS4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
}else if(isIE4){
if(!bolVisible) {
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.display = "none";
} else {
objElement.display = "";
}
}
}
function toggleText(intSelected){
for(i=0;i<3;i++){
if(i==intSelected){
switchDiv('divTex
}else{
switchDiv('divTex
}
}
}
Thanks :)
can u tell us the steps to recreate ur problem..?
ASKER
basically, I access this page from our server and choose, for instance, 'press' from the type pull down on 'overview' tab, then when you go to the 'details' tab only the 'press' div table should appear..but all 5 tables appear on the 'details' tab (ie press, tvc, radio, etc).
Does that clear it up?
Does that clear it up?
I am not sure this is what you need exactly but it will send you in the right direction
the function
function toggleTabs(intVisible){
for(i=1;i<5;i++){
if(i==intVisible){
switchDiv("divTab" +i,true);
}else{
switchDiv("divTab" +i,false);
}
}
}
is hard coded for a 5 tabs scenario
you page has divTab1 and divTab2 but no divTab3 4 and 5.
that is why you have the error.
you can either add the tabs
or change the above function to
function toggleTabs(intVisible){
for(i=1;i<2;i++){
if(i==intVisible){
switchDiv("divTab" +i,true);
}else{
switchDiv("divTab" +i,false);
}
}
}
SnowFlake
the function
function toggleTabs(intVisible){
for(i=1;i<5;i++){
if(i==intVisible){
switchDiv("divTab" +i,true);
}else{
switchDiv("divTab" +i,false);
}
}
}
is hard coded for a 5 tabs scenario
you page has divTab1 and divTab2 but no divTab3 4 and 5.
that is why you have the error.
you can either add the tabs
or change the above function to
function toggleTabs(intVisible){
for(i=1;i<2;i++){
if(i==intVisible){
switchDiv("divTab" +i,true);
}else{
switchDiv("divTab" +i,false);
}
}
}
SnowFlake
I think the problem is that you called your divTab3, 4 and 5 divText3 4 and 5.
SnowFlake.
SnowFlake.
also there might be some missing </divs>
but knowing what you want your page to look like makes you the best person to fix this :)
but knowing what you want your page to look like makes you the best person to fix this :)
there are equal num of starting and ending div tags i checked...
the problem appears with the loop
cos running ur script i get an object expected error when its looking to search for the div name
the problem appears with the loop
cos running ur script i get an object expected error when its looking to search for the div name
My Suggestion:
1)give a name to all ur divText divs which corresponds to the text of the select box
like say <div name = "Radio"> for the option Radio in ur select box
and now have this function:
function toggleText(intSelected){
var temp = intSelected.options[intSel ected.sele ctedIndex] .text
var divs = document.getElementsByTagN ame('div')
for(i=0;i<divs.length;i++) {
if(divs[i].id.indexOf('div Text')!= -1)
{
if(divs[i].name ==temp){
switchDiv('divText'+i,true );
}else{
switchDiv('divText'+i,fals e);
}
}
}
}
1)give a name to all ur divText divs which corresponds to the text of the select box
like say <div name = "Radio"> for the option Radio in ur select box
and now have this function:
function toggleText(intSelected){
var temp = intSelected.options[intSel
var divs = document.getElementsByTagN
for(i=0;i<divs.length;i++)
if(divs[i].id.indexOf('div
{
if(divs[i].name ==temp){
switchDiv('divText'+i,true
}else{
switchDiv('divText'+i,fals
}
}
}
}
intSelected.options ??? :)
how about renaming it elSelect ?
how about renaming it elSelect ?
if u can call the function like
toggleText(this)
it shud work...
toggleText(this)
it shud work...
ASKER
Unfortunately archrajan, this doesn't seemed to have resolved the issue. I have put the page up on the web so that you can see it in living colour:
http://www.harrisonness.com.au/expertsExchange/intranet/job_Trak/add.asp
So, while still on the 'overview' tab select 'press' from the 'type' menu list. Then click the 'details' tab. You should only see the heading 'Press' and fields for:
Publication
Section
Style
Size
Material Deadline
Publication Date
Media
But instead you see all fields for all the possibly 'types' on the 'overview' tab.
Snowflake - thanks for you input but I think the toggleTabs() stuff is fine it's the toggleText() that is not playing the game.
Thanks
http://www.harrisonness.com.au/expertsExchange/intranet/job_Trak/add.asp
So, while still on the 'overview' tab select 'press' from the 'type' menu list. Then click the 'details' tab. You should only see the heading 'Press' and fields for:
Publication
Section
Style
Size
Material Deadline
Publication Date
Media
But instead you see all fields for all the possibly 'types' on the 'overview' tab.
Snowflake - thanks for you input but I think the toggleTabs() stuff is fine it's the toggleText() that is not playing the game.
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Now to add to that ,
when you change your combo box
you want to hide those some divs in the second tab -
o.k.
lets ignore your code for a moment.
you have a few issues here
1. you need to know how to hid and show a div
but this is very nicely handled by switchDiv(strDivName,bolVi sible)
assuming it gets the corect parameters.
2. you need to knwo what divs you want to hid and what divs you want to show
now in this area you have quite a few options
a. just call each div separately by its name
so you will have
<select name="" size=1 onChange="ResetTab2DivsVis ibility(th is.selecte dIndex)" ID="Select1">
function ResetTab2DivsVisibility(in dex) {
switchDiv('press',index==1 );
switchDiv('tvc',index==2);
switchDiv('radio',index==3 );
switchDiv('print',index==4 );
switchDiv('ambient',index= =5);
}
this will set each of them to be visible if it is his index that was selected.
this assumes that you named your wrapper divs 'press', 'tvc' etc. as is in your current code.
when you change your combo box
you want to hide those some divs in the second tab -
o.k.
lets ignore your code for a moment.
you have a few issues here
1. you need to know how to hid and show a div
but this is very nicely handled by switchDiv(strDivName,bolVi
assuming it gets the corect parameters.
2. you need to knwo what divs you want to hid and what divs you want to show
now in this area you have quite a few options
a. just call each div separately by its name
so you will have
<select name="" size=1 onChange="ResetTab2DivsVis
function ResetTab2DivsVisibility(in
switchDiv('press',index==1
switchDiv('tvc',index==2);
switchDiv('radio',index==3
switchDiv('print',index==4
switchDiv('ambient',index=
}
this will set each of them to be visible if it is his index that was selected.
this assumes that you named your wrapper divs 'press', 'tvc' etc. as is in your current code.
two other alternatives would be:
b. to name the divs based on the index they refer to.
assuming the divs will be named divTab2Subarea1,divTab2Sub area2,divT ab2Subarea 3 etc.
function ResetTab2DivsVisibility(in dex) {
for (var i=1;i<6;i++) {
switchDiv('Tab2Subarea'+i, index==i);
}
}
additional enhansments might include remembering the previosly visible subArea
and changing only it and the newly selected one
or generalizing on the last idea assuming you have several groups
function ResetRadioDivsGroupVisibil ity(groupB aseName,gr oupSize,in dex) {
for (var i=1;i<groupSize;i++) {
switchDiv(groupBaseName+i, index==i);
}
}
which you would then call via
onChange="ResetRadioDivsGr oupVisibil ity('divTa b2Subarea' ,6,this.se lectedInde x)"
again assuming the divTab2Subarea1 .. divTab2Subarea6 naming scheme.
And I could think of even more if you need them :)
I hope that set thing on track for you :)
SnowFlake
b. to name the divs based on the index they refer to.
assuming the divs will be named divTab2Subarea1,divTab2Sub
function ResetTab2DivsVisibility(in
for (var i=1;i<6;i++) {
switchDiv('Tab2Subarea'+i,
}
}
additional enhansments might include remembering the previosly visible subArea
and changing only it and the newly selected one
or generalizing on the last idea assuming you have several groups
function ResetRadioDivsGroupVisibil
for (var i=1;i<groupSize;i++) {
switchDiv(groupBaseName+i,
}
}
which you would then call via
onChange="ResetRadioDivsGr
again assuming the divTab2Subarea1 .. divTab2Subarea6 naming scheme.
And I could think of even more if you need them :)
I hope that set thing on track for you :)
SnowFlake
ASKER
Thanks for your help snowflake.
your most welcome :)
<script type="text/javascript" src="../js/toggleTabs.js">
<script type="text/javascript" src="../js/toggleText.js">