Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member fukushiro's Avatar
    Join Date
    Dec 2004
    Location
    são paulo, sp
    Posts
    8
    Member #
    8576
    hey, everyone

    i have a page with lots of divs with different classes.

    i'd like to create a menu with checkboxes, so when you uncheck one box, all divs with the same class will be hidden.

    i tried to do it myself, but i couldn't, the only way it worked was using getElementById, but i can't do it, cause i'm working with classes.

    may someone help?

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Javascript does not have a built-in method for handling classes, so you'd have to write your own. Of course there are many ways to do that.

    In the following example, I use the getElementsByTagName() method to grab every element on the page (you could put "div" there). Then I loop through everything and compare the className to the theClass, which I passed to the method:

    Code:
    function getElementsByClass(theClass) {
        everyTag = document.getElementsByTagName("*");
        for(i=0; i < everyTag.length; i++) {
            if(everyTag[i].className == theClass) {
                // here's your show/hide code
            }
        }
    }
    Note: I have never used this in production, so it might be buggy.
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Junior Member fukushiro's Avatar
    Join Date
    Dec 2004
    Location
    são paulo, sp
    Posts
    8
    Member #
    8576
    thanks!

    i tried this: i mixed up this script: http://programming.top54u.com/post/J...rue-False.aspx (that changes the visibility of a div if a box is checked) with this http://www.shawnolson.net/a/503/alte...avascript.html (that changes css by class).

    so, if a box is checked, some attributes are changed.

    i'm finishing the page. when it's done i'll post it.

    thanks!

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Quote Originally Posted by DCScene
    Javascript does not have a built-in method for handling classes, so you'd have to write your own. Of course there are many ways to do that.

    In the following example, I use the getElementsByTagName() method to grab every element on the page (you could put "div" there). Then I loop through everything and compare the className to the theClass, which I passed to the method:

    Code:
    function getElementsByClass(theClass) {
        everyTag = document.getElementsByTagName("*");
        for(i=0; i < everyTag.length; i++) {
            if(everyTag[i].className == theClass) {
                // here's your show/hide code
            }
        }
    }
    Note: I have never used this in production, so it might be buggy.
    That should work fine, with a caveat: you can legally assign multiple class names to elements, like:
    HTML Code:
    <p class="note important">This is a note, and it's important!</p>
    If you use your function with an argument such as "note", it won't find the node because the class name doesn't exactly match. The solutions is tedious, but works: either tokenize the class name using whitespace as a delimiter, do some regular expression matching on the class name, or go nuts and use a third-party framework like YUI which handles that condition.

    Or, if you don't use multiple class names per element, it's just dandy.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:07 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com