Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 490
  • Last Modified:

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)'>Overview</td>
      <td width="84"  onClick='toggleTabs(2)'>Details</td>
      <td width="84"  onClick='toggleTabs(3)'>Tasks</td>
      <td width="84"  onClick='toggleTabs(4)'>Notes</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.selectedIndex)">
                <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</option>
                <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></td>
                <td colspan="2" class="form" >&nbsp;</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" >&nbsp;</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></td>
                <td class="form" >&nbsp;</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></td>
                <td colspan="2" class="form" >&nbsp;</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" >&nbsp;</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>
0
harrisonness
Asked:
harrisonness
  • 9
  • 4
  • 4
1 Solution
 
SnowFlakeCommented:
It would help if you told us whats in those two files

<script type="text/javascript" src="../js/toggleTabs.js"></script>
<script type="text/javascript" src="../js/toggleText.js"></script>
0
 
harrisonnessAuthor Commented:
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,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).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,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).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('divText'+i,true);
          }else{
               switchDiv('divText'+i,false);
          }
     }
}


Thanks :)
0
 
archrajanCommented:
can u tell us the steps to recreate ur problem..?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
harrisonnessAuthor Commented:
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?
0
 
SnowFlakeCommented:
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

0
 
SnowFlakeCommented:
I think the problem is that you called your divTab3, 4 and 5     divText3 4 and 5.

SnowFlake.
0
 
SnowFlakeCommented:
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 :)
0
 
archrajanCommented:
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
0
 
archrajanCommented:
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[intSelected.selectedIndex].text
var divs = document.getElementsByTagName('div')
     for(i=0;i<divs.length;i++){
       if(divs[i].id.indexOf('divText')!= -1)
       {
          if(divs[i].name  ==temp){
               switchDiv('divText'+i,true);
          }else{
               switchDiv('divText'+i,false);
          }
     }
       }
}
0
 
SnowFlakeCommented:
intSelected.options ??? :)

how about renaming it elSelect ?
0
 
archrajanCommented:
if u can call the function like

toggleText(this)

it shud work...
0
 
harrisonnessAuthor Commented:
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

0
 
SnowFlakeCommented:
> Snowflake - thanks for you input but I think the toggleTabs() stuff is fine it's the toggleText() that is not playing the game.

nothing will change the fact that upon load your page throws an error,
the error is in the function

function switchDiv(strDivName,bolVisible){
 //identify the element based on browser type
 if (isNS4) {
   objElement = document.layers[strDivName];
 } else if (isIE4) {
   objElement = document.all[strDivName].style;
 } else if (isIE5 || isNS6) {
   objElement = document.getElementById(strDivName).style;
 }

on the line
   objElement = document.getElementById(strDivName).style;

the current value if strDivName is divTab3 and no such div exists.

how did it get there ?

it was called by
 
function toggleTabs(intVisible){
     for(i=1;i<5;i++){
          if(i==intVisible){
               switchDiv("divTab" +i,true);
          }else{
               switchDiv("divTab" +i,false);
          }
     }

from the line:
               switchDiv("divTab" +i,false);

when i had the value 3

and that was called from your <body onload="toggleTabs(1);"

so you MUST fix this
either by adding divTab3 divTab4 and divTab5
or by changing the loop condition in toggleTabs
or by changing switchDiv to check if document.getElementById(strDivName) actually returns an element before accessing its .style.

Now maybe there are other aditional problems but they could be related to this.

looking at your page it would seem like you have 4 tabs
so IMHO you should have divTab3 and divTab4 elements in your code which you do not currently have.

SnowFlake
0
 
SnowFlakeCommented:
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,bolVisible)
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="ResetTab2DivsVisibility(this.selectedIndex)" ID="Select1">

function ResetTab2DivsVisibility(index) {
   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.

0
 
SnowFlakeCommented:
two other alternatives would be:
b. to name the divs based on the index they refer to.

assuming the divs will be named divTab2Subarea1,divTab2Subarea2,divTab2Subarea3 etc.

function ResetTab2DivsVisibility(index) {
  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 ResetRadioDivsGroupVisibility(groupBaseName,groupSize,index) {
  for (var i=1;i<groupSize;i++) {
       switchDiv(groupBaseName+i,index==i);
  }
}

which you would then call via
onChange="ResetRadioDivsGroupVisibility('divTab2Subarea',6,this.selectedIndex)"

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
0
 
harrisonnessAuthor Commented:
Thanks for your help snowflake.
0
 
SnowFlakeCommented:
your most welcome :)
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 9
  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now