Solved

Hide DIVs if Javascript Is Active Else Show Them

Posted on 2006-06-23
12
258 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
Comment Utility
   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
Comment Utility
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
Comment Utility
And the lines starting with //, you know they won't execute with the // there, right?
0
 

Author Comment

by:vdiaz761
Comment Utility
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
Comment Utility
Yeah!
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:vdiaz761
Comment Utility
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
Comment Utility
That what you do is normaly done with <noscript>...</noscript>


0
 

Author Comment

by:vdiaz761
Comment Utility
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
Comment Utility
Once again it was an error in my syntax... if statement requires == and not =
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Request a refund of the points...
0
 

Accepted Solution

by:
PAQ_Man earned 0 total points
Comment Utility
PAQed with points refunded (375)

PAQ_Man
Community Support Moderator
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now