Solved

Hide DIVs if Javascript Is Active Else Show Them

Posted on 2006-06-23
12
263 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
Independent Software Vendors: 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!

 

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Can't get page to reload 9 18
Can't get js code to execute 8 30
Jquery 7 29
How to pass values to HTML-5 attribute dynamically? 24 44
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

756 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