SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unobtrusive JS but with multiple occasions on a page.

    I have a tooltip which uses a little bit of non-essential JS.

    I want to use JS unobtrusively, apply an id to the tooltip and let JS do it the right way.

    The problem is I could need more than one tooltip on a page, and I understand that an id should be uniquely applied.

    If there was only ever a maximum of one item per page then this would be simple.

    The same could be asked for any button on a page. Imagine I wanted to replace the button with a 'loading please wait' image. I would hope to apply an "id='please-wait-button'" to any button needing it, multiple times on a page, and let JS do it unobtrusively, but again, I should't use multiple id's.

    What's the best way to do this?

    What about using getElementByName? Can I apply a name to every tooltip / every button and call it that way? Is that the right way / best way?

    Thanks.

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Your best bet is probably to use getElementsByClassName(), that way you can select all the elements with (for example) class="tooltip" and set them up.

    You might need to do some hackery for IE versions older than 9 though, something like:

    Code:
    // only load this function in ie 6,7 or 8
    function getElementsByClassName(findClass, parent) {
    
      parent = parent || document;
      var elements = parent.getElementsByTagName('*');
      var matching = [];
    
      for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
    
        var regex = new RegExp('\b' + findClass + '\b')
    
        if (elements[i].className.match(regex)) {
          matching.push(elements[i]);
        }
    
      }
    
      return matching;
    
    }

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    ^ what he said. Just to add the check whether or not it already exists:

    Code javascript:
    if (typeof getElementsByClassName !== "function") {
     
      function getElementsByClassName(findClass, parent) {
        parent = parent || document;
        var elements = parent.getElementsByTagName('*');
        var matching = [];
        for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
          var regex = new RegExp('\b' + findClass + '\b')
          if (elements[i].className.match(regex)) {
            matching.push(elements[i]);
          }
        }
        return matching;
      }
    }

    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


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
  •