[Webinar] Streamline your web hosting managementRegister Today

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

Hide DIVs if Javascript Is Active Else Show Them

Hello Experts,

I have several rows in a table each containing a link that shows/hides divs with description of that particular item being clicked. By default, the divs are shown. If the user has javascript enabled, the function "hideDivs" is called with the id of each div that I want to hide as a parameter. This function call is SUPPOSE to hide the divs but it doesn't work. Any ideas on how to get this to work?

 Here is my javascript so far:

<script type="text/javascript">
      function toggleLayer(whichLayer)
      {
            if (document.getElementById)
            {
                  // this is the way the standards work
                  var style2 = document.getElementById(whichLayer).style;
                  style2.display = style2.display? "":"block";
            }
            else if (document.all)
            {
                  // this is the way old msie versions work
                  var style2 = document.all[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
            else if (document.layers)
            {
                  // this is the way nn4 works
                  var style2 = document.layers[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
      }
      
      function hideDivs(){
             for (var cnt=0; cnt < hideDivs.arguments.length; cnt++)
                              //document.getElementById(hideDivs.arguments[cnt]).style.display = "none";
                              //document.layers[hideDivs.arguments[cnt]].style.display = "none";
                              //document.all[hideDivs.arguments[cnt]].style.display = "none";
                              //document.getElementById(hideDivs.arguments[cnt]).style.display = "none";
                              
                        document.write((hideDivs.arguments[cnt]));
                        document.getElementById(hideDivs.arguments[cnt]).style.display = "none";      
      }
      
      hideDivs('desc1', 'desc2', 'desc3', 'desc4', 'desc5');
</script>


Very Urgent 375pts

Thanks,

Vic
0
vdiaz761
Asked:
vdiaz761
1 Solution
 
callrsCommented:
   function hideDivs() <--------- no parameters?

      hideDivs('desc1', 'desc2', 'desc3', 'desc4', 'desc5'); <---------- 5 parameters


the function is not receiving any of the passed parameters...

Well the syntax, if it's correct, is new to me, so maybe I'm wrong..
0
 
vdiaz761Author Commented:
It doesn't matter:
It loops though any given number of parameters/arguments:
hideDivs.arguments.length
hideDivs.arguments[cnt]
0
 
callrsCommented:
And the lines starting with //, you know they won't execute with the // there, right?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
vdiaz761Author Commented:
that was testing... I think I got it. I had a document.write statement to see if my code was being executed. I took that out and it works..
0
 
callrsCommented:
Yeah!
0
 
vdiaz761Author Commented:
I can't believe it was my own attempt to test if this thing works that was holding it back from behaving as it should...

Here's the final JS and CSS:
<script type="text/javascript">
      function toggleLayer(whichLayer)
      {
            if (document.getElementById)
            {
                  // this is the way the standards work
                  var style2 = document.getElementById(whichLayer).style;
                  style2.display = style2.display? "":"block";
            }
            else if (document.all)
            {
                  // this is the way old msie versions work
                  var style2 = document.all[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
            else if (document.layers)
            {
                  // this is the way nn4 works
                  var style2 = document.layers[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
      }
      
      function hideDivs(){
             for (var cnt=0; cnt < hideDivs.arguments.length; cnt++)
                  document.getElementById(hideDivs.arguments[cnt]).style.display = "none";
      }
      
      
</script>
<style type="text/css">
      div#desc1, div#desc2, div#desc3, div#desc4, div#desc5, div#desc6
{
margin: 5px 20px 5px 0px;
/*display: none;*/
text-align:justify; font-weight:500;
}
.
.
.
<body onload ="hideDivs('desc1', 'desc2', 'desc3', 'desc4', 'desc5');">

0
 
ZvonkoSystems architectCommented:
That what you do is normaly done with <noscript>...</noscript>


0
 
vdiaz761Author Commented:
Well... With every solution comes a new problem. My goal here is to show the divs if the user doesn't have javascript enabled. If they do then first off, the divs should be hidden and then they should be able to toggle the divs visibility on and off. I have it so that if their javascript is disabled, the divs are shown. If enabled, hidedivs is called and hides the divs. Clicking on the link shows the respective div, but doesn't hide it. I need to hide it as well.

Here's My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
      function toggleLayer(whichLayer)
      {
            if (document.getElementById)
            {
                  // this is the way the standards work
                  var style2 = document.getElementById(whichLayer).style;
                  //document.getElementById(whichLayer).style.display = document.getElementById(whichLayer).style.display? "block":"none";
                  if(document.getElementById(whichLayer).style.display = "block"){
                        document.getElementById(whichLayer).style.display = "none"
                  } else if(document.getElementById(whichLayer).style.display = "none"){
                        document.getElementById(whichLayer).style.display = "block"
                  }
            }
            else if (document.all)
            {
                  // this is the way old msie versions work
                  var style2 = document.all[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
            else if (document.layers)
            {
                  // this is the way nn4 works
                  var style2 = document.layers[whichLayer].style;
                  style2.display = style2.display? "":"block";
            }
      }
      
      function hideDivs(){
             for (var cnt=0; cnt < hideDivs.arguments.length; cnt++)
                              document.getElementById(hideDivs.arguments[cnt]).style.display = "none";
      }
      
      
</script>
<style type="text/css">
      div#desc1, div#desc2, div#desc3, div#desc4, div#desc5, div#desc6
{
margin: 5px 20px 5px 0px;
display: none;
text-align:justify; font-weight:500;
}
img{border:0px; padding-right:5px;}
body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px}
a{color:#953200;}
td{padding:3px 0px 0px 5px; color:#953200; height:10px; vertical-align:top; font-weight:bold}
td.description{width:450px;}
td.radio, td.price{width:50px; text-align:center}
tr.hdr td{background-color:#5d2000; color:#ffa200; font-weight:bold}
tr.alt1{background-color:#ffc96b;}
tr.alt2{background-color:#ffdda3;}
</style>
</head>
<!-- onload ="hideDivs('desc1', 'desc2', 'desc3', 'desc4', 'desc5')" -->
<body onload ="hideDivs('desc1', 'desc2', 'desc3', 'desc4', 'desc5')">
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#fca307" style="width:550px">
      <form>
      <tr class="hdr">
            <td class="radio">Select</td>
            <td class="description">Description</td>
            <td class="price">Price</td>
      </tr>
      <tr class="alt1">
            <td class="radio"><input type="radio" name="option" value="test" /></td>
            <td class="description">
            <a class="commentLink" title="View Full Description to this entry" href="javascript:toggleLayer('desc1');">K&N Mustang Cold Air Tune</a>
            <div id="desc1">
                  <img src="http://www.bonfiliodesign.com/images/thumbnails/thumbnails_12.gif" align="left" />My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...
            </div>
            </td>
            <td class="price">FREE!</td>
      </tr>
      <tr class="alt2">
            <td class="radio"><input type="radio" name="option" value="test" /></td>
            <td class="description">
            <a class="commentLink" title="View Full Description to this entry" href="javascript:toggleLayer('desc2');">Superchips Data Acquisition PKG.</a>
            <div id="desc2">
                  <img src="http://www.bonfiliodesign.com/images/thumbnails/thumbnails_11.gif" align="left" />My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...
            </div>
            </td>
            <td class="price">FREE!</td>
      </tr>
      <tr class="alt1">
            <td class="radio"><input type="radio" name="option" value="test" /></td>
            <td class="description">
            <a class="commentLink" title="View Full Description to this entry" href="javascript:toggleLayer('desc3');">Driver Extreme Tune</a>
            <div id="desc3">
                  <img src="http://www.bonfiliodesign.com/images/thumbnails/thumbnails_10.gif" align="left" />My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...
            </div>
            </td>
            <td class="price">FREE!</td>
      </tr>
      <tr class="alt2">
            <td class="radio"><input type="radio" name="option" value="test" /></td>
            <td class="description">
            <a class="commentLink" title="View Full Description to this entry" href="javascript:toggleLayer('desc4');">Driver Extreme Tuen V2</a>
            <div id="desc4">
                  <img src="http://www.bonfiliodesign.com/images/thumbnails/thumbnails_09.gif" align="left" />My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...
            </div>
            </td>
            <td class="price">FREE!</td>
      </tr>
      <tr class="alt1">
            <td class="radio"><input type="radio" name="option" value="test" /></td>
            <td class="description">
            <a class="commentLink" title="View Full Description to this entry" href="javascript:toggleLayer('desc5');">K&N Mustang Cold Air Tune</a>
            <div id="desc5">
                  <img src="http://www.bonfiliodesign.com/images/thumbnails/thumbnails_08.gif" align="left" />My roommate seems to lack the understanding that REGULAR cleaning is a good thing. I recently had friends come for a visit. One went to use his bathroom and she actually screamed "EWWWWWW!" because it was so nasty. I hate my slob roommate...
            </div>
            </td>
            <td class="price">FREE!</td>
      </tr>
      </form>
</table>

</body>
</html>

Thanks
0
 
vdiaz761Author Commented:
Once again it was an error in my syntax... if statement requires == and not =
0
 
HonorGodCommented:
Request a refund of the points...
0
 
PAQ_ManCommented:
PAQed with points refunded (375)

PAQ_Man
Community Support Moderator
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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