SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Jan 2005
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Controlling a set of elements

    i am trying to do something which allows me to control the display of a set, or a group of elements. but i only know how to use the getelementbyid(), which only get ONE element, and not a group of elements.

    Code:
    function toggle(ele){
    	if (document.getElementById(ele).style.display=="none") {
    		document.getElementById(ele).style.display="inline";
    	} else {
    		document.getElementById(ele).style.display="none";
    	}
    }
    and then i have a few span tags of the same id.
    Code:
    <span id="tag1">serserser</span>
    <span id="tag2">serserser</span>
    <span id="tag1">serserser</span>
    <span id="tag1">serserser</span>
    finally i have a link which when click will set all the tag1 spans disappear.
    but this isn't working as only the first tag1 span will disppear. the rest remains there intact.

    how should i go about doing this?
    thanks.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi x[E]nOn,

    No two elements can have the same ID in a document - but they can have the same class name. Experiment with the following. Feel free to ask any questions you may have about it.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Set Display By Class</title>
    <style type='text/css'>
    .btn {
      border-bottom: 1px dotted #000;
      cursor: pointer;
    }
    .collapsible {
      background: #ccc;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      document.getElementById('btnOff').onclick = function() {
        xGetElementsByClassName('collapsible', document, 'span', function(e){e.style.display = 'none';});
      };
      document.getElementById('btnOn').onclick = function() {
        xGetElementsByClassName('collapsible', document, 'span', function(e){e.style.display = 'inline';});
      };
    }
    // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
    function xGetElementsByClassName(c,p,t,f)
    {
      var r = new Array();
      var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
      var e = p.getElementsByTagName(t);
    //  var e = xGetElementsByTagName(t,p); // See xml comments.
      for (var i = 0; i < e.length; ++i) {
        if (re.test(e[i].className)) {
          r[r.length] = e[i];
          if (f) f(e[i]);
        }
      }
      return r;
    }
    </script>
    </head>
    <body>
    <h1>Set Display By Class</h1>
    <p><span id='btnOff' class='btn'>Set display:none</span> on all spans with class=='collapsible'.</p>
    <p><span id='btnOn' class='btn'>Set display:inline</span> on all spans with class=='collapsible'.</p>
    <h2>But I must explain...</h2>
    <p>Sed ut <span class='collapsible'>perspiciatis unde omnis</span> iste natus error</p>
    <h2>Sed ut perspiciatis</h2>
    <p><span class='collapsible'>But I must</span> explain to you how all this mistaken</p>
    <h2>On the other hand...</h2>
    <p>At vero eos <span class='collapsible'>et accusamus et iusto</span> odio dignissi</p>
    <h2>At vero eos et</h2>
    <p>On the other hand, <span class='collapsible'>we denounce</span> with righteous i</p>
    </body>
    </html>
    Last edited by MikeFoster; Nov 19, 2006 at 15:16. Reason: xGetElementsByClassName modified per Kravvitz's suggestions.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2005
    Posts
    204
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks MikeFoster!
    but i am a little confused with this part
    Code:
    var re = new RegExp('\\b'+c+'\\b', 'i');
    what does it mean? i am not very good with regular expressions.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is some documentation on xGetElementsByClassName.

    The RE searches for a whole word, because the className value might be something like this:

    <div class='classname1 classname2 classname3'>...</div>

    It is also case-insensitive.


  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike, two things. 1) The specs say that classes are case-sensitive, not case-insensitive. 2) \b won't work right if you use hyphens in classes.

    I suggest you take a look at this one.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz, thank you very much for pointing this out to me. I have modified the function accordingly. Documentation also updated.

    Thanks again.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, Mike

    P.S. You mistyped my screen-name the second time on the documentation page.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops!

    Corrected. Thanks again


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •