Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Hide DIVS with JavaScript

  1. Mar 10, 2008 #1

    Hootenanny

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    I have some divs on a web page, with the class name "hans" which I would like to hide with JavaScript when the page loads. The reason I have it set up this way is so that the user can reveal the div's by clicking a link, but if JavaScript is disabled, the div's will be displayed by default. I've written a loop to loop through the document and hide all the divs, but it doesn't seem to be working. All the divs have unique ID's. The toggle() function used below is a function that just toggle's a named div between display:none; and display:block;

    Code (Text):

    function hideans() {
        var boxes = document.getElementsByTagName("div");
       
         for(var i=0;i<boxes.length;i++) {
            var boxClass = boxes[i].className;
         
            if(boxClass.match("hans")) {
                toggle(boxes[i]);
            }
        }
    }
     
    Any help would be much appreciated.
     
  2. jcsd
  3. Mar 10, 2008 #2
    Very very few people have JS disabled.

    At first glance, I think to get the number of elements for the loop you need to do var num = boxes.length; after getting the list from getelements. Then use num instead of boxes.
     
  4. Mar 11, 2008 #3
    I don't see any problems with that, although I'm not that familiar with javascript. If you make a sample page and give me the url I'm sure I can locate the problem for you though.

    Or you can try to locate the exact problem yourself by inserting alerts with the relevant data as output and see if it coincides with reality. IE:

    Code (Text):

    function hideans() {
        var boxes = document.getElementsByTagName("div");
             alert('Document contains ' + boxes.length + ' div elements.');

         for(var i=0;i<boxes.length;i++) {
            var boxClass = boxes[i].className;
             alert('Div #' + i + ' is of class "' + boxClass + '".');
         
            if(boxClass.match("hans")) {
                alert('Div #' + i + ' (class "' + boxClass + '") is a match, toggling now.');
                toggle(boxes[i]);
            }
        }
    }
     
    If you get no alert boxes then your code never reaches the hideans() function, if you get all the expected alert boxes then the problem is inside toggle() somewhere.

    k
     
  5. Mar 11, 2008 #4

    Hootenanny

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    Thanks guys, I added the num variable as you suggested Greg. I also implemented the diagnostic alerts that you suggested kenewbie. All goes well until the function calls the toggle function, after which the function fails to execute and the for loop terminates. I've posted the toggle code below. Thanks for your help thus far guys,

    Code (Text):

    function toggle( whichLayer ){
      var elem, vis;
      if( document.getElementById ) // W3 Standard Compliance
        elem = document.getElementById( whichLayer );
      else if( document.all ) // Old IE
          elem = document.all[whichLayer];
      else if( document.layers ) // Nestscape 4
        elem = document.layers[whichLayer];
      vis = elem.style;

      // if no style.display value

      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
        vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
      vis.dis
     
     
  6. Mar 12, 2008 #5
    "whichLayer" is already an element object, there is no need to go through all the hoops at the beginning of the function. As far as I can tell, this is all you need to do:

    Code (Text):

    function toggle(e)
    {
        e.style.display = e.style.display != '' ? '' : 'none';
    }
     
    If you still have trouble, it would be a lot easier to fix this for you if you made a sample document with a few divs and the relevant code in it and put it on a webserver. Sort of a bare bones sample that should work only it doesn't.

    k
     
  7. Mar 12, 2008 #6

    Hootenanny

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    I think I've found the problem. My toggle function takes the element ID as an argument, however, my hideans() function only provides the class name. Is there anyway to loop though all the elements with a given class name I've already found and find their ID?
     
  8. Mar 12, 2008 #7
    I'm pretty sure it's just a “.id” property on the element object.

    The Visibone charts are really handy for this stuff; you should buy them if you use them, of course, but he provides full images of the charts themselves on his site.
     
  9. Mar 12, 2008 #8

    Hootenanny

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    That's great, thanks a lot! For those who are interested, here's the complete code,

    Code (Text):

    function toggle( whichLayer ){
      var elem, vis;
      if( document.getElementById )
        elem = document.getElementById( whichLayer );
      else if( document.all )
          elem = document.all[whichLayer];
      else if( document.layers )
        elem = document.layers[whichLayer];
      vis = elem.style;
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
        vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }

    function hideans() {
        var boxes = document.getElementsByTagName("div");
        var num = boxes.length;
         for(var i=0;i<num;i++) {
         
            if(boxes[i].className.match("hans")) {
                toggle(boxes[i].id);
            }
        }
    }

    window.onload = function() {
            hideans();
    }
     
  10. Mar 12, 2008 #9
    You are doing this overly elaborate. boxes is a DOM element, why not just send that to toggle() rather than go out of your way to pass boxes.id and then transform it back to a DOM element?

    Code (Text):

    function toggle( elem ) {
      vis = elem.style;
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
        vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
    }

    function hideans() {
        var boxes = document.getElementsByTagName("div");
       
            for(var i=0;i<boxes.length;i++)
            if(boxes[i].className.match("hans")) toggle(boxes[i]);
     }
     
    k
     
  11. Mar 12, 2008 #10

    Hootenanny

    User Avatar
    Staff Emeritus
    Science Advisor
    Gold Member

    The reason I have my toggle() function set up as shown, is that it's used elsewhere on the site where I need it to take an element Id as an argument. Thanks for your help by the way.
     
  12. Mar 13, 2008 #11
    Ahh ok, that explains it :)

    k
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?



Similar Discussions: Hide DIVS with JavaScript
  1. Javascript Help (Replies: 4)

  2. Frontpage JavaScript (Replies: 3)

  3. Javascript problem (Replies: 6)

Loading...