SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event delegation - same function for more than 1 ID

    Hi,

    I have to use JS to drive a flyout menu for IE6. Unfortunately the
    given script just handles 1 ID (<ul id=nav>). As I need this flyout
    menu several times (link in table) I need to assign the function to
    all ids with the name "nav_x" whereby x represents a counting number:
    nav_1, nav_2, nav_3...

    Here is the current code. Maybe you guys can help me to put this into
    a function which takes all nav_x?

    HTML Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    thx

    T.C.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd use getElementsByClassName (you have to search google for it) and give each menu a class name.

    Then you can loop through each one and assign the event callback.


  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I downloaded the "getelementsbyclassname" script from Roberts page and
    integrated it into my html.

    As I'm a absolute JS beginner, I don't how to create this loop and assign
    the event callback. Do you have a tutorial or example code how to accomplish
    this task?

  4. #4
    SitePoint Addict
    Join Date
    Jan 2007
    Location
    Romania
    Posts
    203
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try use jQuery to accomplish this. You'll learn a lot!

    See:
    http://docs.jquery.com/Events/hover
    http://docs.jquery.com/Selectors/class#class

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code javascript:
    window.onload = function() {
                    var navs = getElementsByClassName(document, 'UL', 'nav');
                    for(var i = 0; i < navs.length; i++) {
                        var li = navs[i].getElementsByTagName('LI');
                        for(var l = 0; l < li.length; l++) {
                            li[l].onmouseover = function() {
                                this.className+=" sfhover";
                            }
                            li[l].onmouseout = function() {
                                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                            }
                        }
                    }
                }

    that would on page load setup the onmouseover/onmouseout events on each of the li's within all of the UL's with a class of .nav

    HTH


  6. #6
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Event delegation means setting the handler on the parent element (ul) and examininig the event target or source element of each event instance. If the source has the class you want, perform the flyout.

  7. #7
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @julian: yes, usually I'm using jQuery as it's a little bit easier for me to understand
    JS and it's supporting all those stuff natively. But for this project it's not set
    so I haven't to use it.

    @gRoberts: thanks for your example. Unfortunately it's not working as the
    this code line makes trouble:
    var navs = getElementsByClassName(document, 'UL', 'nav');

    I have the page attached so it should be easier to test it thx
    Attached Files Attached Files

  8. #8
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No one any idea why there is this js error?

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it took so long for the attached file to be validated, I lost track. I will look into this when I get home.


  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I am used to a different getElementsByClassName...

    Code javascript:
    var navs = getElementsByClassName('nav', 'UL', document);


  11. #11
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks indeed It's working fine.


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
  •