Solved

Hide DIVs if Javascript Is Active Else Show Them

Posted on 2006-06-23
12
262 Views
Last Modified: 2012-06-27
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
Comment
Question by:vdiaz761
12 Comments
 
LVL 30

Expert Comment

by:callrs
ID: 16968270
   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
 

Author Comment

by:vdiaz761
ID: 16968288
It doesn't matter:
It loops though any given number of parameters/arguments:
hideDivs.arguments.length
hideDivs.arguments[cnt]
0
 
LVL 30

Expert Comment

by:callrs
ID: 16968293
And the lines starting with //, you know they won't execute with the // there, right?
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:vdiaz761
ID: 16968309
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
 
LVL 30

Expert Comment

by:callrs
ID: 16968317
Yeah!
0
 

Author Comment

by:vdiaz761
ID: 16968354
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 16968526
That what you do is normaly done with <noscript>...</noscript>


0
 

Author Comment

by:vdiaz761
ID: 16968661
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
 

Author Comment

by:vdiaz761
ID: 16968734
Once again it was an error in my syntax... if statement requires == and not =
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 16973748
Request a refund of the points...
0
 

Accepted Solution

by:
PAQ_Man earned 0 total points
ID: 17538382
PAQed with points refunded (375)

PAQ_Man
Community Support Moderator
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question