SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Flexible dropdown menu with events

    Hi,

    I've been trying to writ my own basic dropdown menu but I'm a little stuck.
    Here's the HTML:
    Code:
    <div id="mainnavigation">
         <ul class="menubar">
               <li class="home first"><a href="alink">a lvl-1 link</a>
                     <ul>
                     <li><a href="alink">a lvl-2 link</a></li>
                     <li><a href="alink">a lvl-2 link</a></li>
                     </ul>
               </li>
               <li class="home first"><a href="alink">a lvl-1 link</a>
                     <ul>
                     <li><a href="alink">a lvl-2 link</a></li>
                     <li><a href="alink">a lvl-2 link</a></li>
                     </ul>
               </li>
               <li class="home first"><a href="alink">a lvl-1 link</a>
                     <ul>
                     <li><a href="alink">a lvl-2 link</a></li>
                     <li><a href="alink">a lvl-2 link</a></li>
                     </ul>
               </li>
                </ul>
            </div>
    and this is the script:

    Code:
    function addEvento(elm, evType, fn, useCapture){
       if(elm.addEventListener){
          elm.addEventListener(evType, fn, useCapture);   
       } else if(elm.attachEvent){
          var r = elm.attachEvent('on' + evType, fn);
          return r;
       } else {
          elm['on' + evType] = fn;
       }
    }
    
    function hider1(){
       document.getElementById('sublist1').style.left = '-1600px';
       document.getElementById('sublist1').parentNode.style.position = 'static';
    }
    
    function shower1(){
       document.getElementById('sublist1').style.left = '0px';
       document.getElementById('sublist1').parentNode.style.position = 'relative';
    }
    
    function hider2(){
       document.getElementById('sublist2').style.left = '-1600px';
       document.getElementById('sublist2').parentNode.style.position = 'static';
    }
    
    function shower2(){
       document.getElementById('sublist2').style.left = '0px';
       document.getElementById('sublist2').parentNode.style.position = 'relative';
    }
    
    
    function initfunc(){
    
       if(document.getElementById('mainnavigation')){
       var menuwrapper = document.getElementById('mainnavigation').getElementsByTagName('UL');
       var counter = 0;
       for(counter = 1; counter < menuwrapper.length; counter++){
          menuwrapper[counter].setAttribute('id','sublist'+counter);
          var sublist = document.getElementById('sublist'+counter);  
          if(counter == 1){
          addEvento(sublist, 'mouseout', hider1, false);   
          addEvento(sublist.parentNode, 'mouseover', shower1, false);
          addEvento(sublist.parentNode, 'mouseout', hider1, false);
          }
    
          if(counter == 2){
          addEvento(sublist, 'mouseout', hider2, false);   
          addEvento(sublist.parentNode, 'mouseover', shower2, false);
          addEvento(sublist.parentNode, 'mouseout', hider2, false);
          }
    
       }
    
       }
       
    }
    
    addEvento(window, 'load', initfunc, false);
    The problem should be fairly obvious ... in the current situtaion, I have to create new show and hide functions for each individual sublist > hider1(), shower1(),hider2(),shower2), ...

    Obviously this is ridiculeous since each time a new submenu is added, I have to create 2 new functions + I have to add another if(counter == x) ...

    I tried passing the counter-value along with the functions but this didn't do anything. Can someone tell me how I can pass a variable to the hide/show functions without having to create new functions ?

    PS: I can't edit the HTML at all (CMS) so I really have to attach the events this way.

    Thanks in advance !
    Last edited by Percept; Sep 24, 2007 at 10:04.


  2. #2
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not tested ...

    Code:
    function hider (n) {
       document.getElementById('sublist'+n).style.left = '-1600px';
       document.getElementById('sublist'+n).parentNode.style.position = 'static';
    }
    
    function shower (n) {
       document.getElementById('sublist'+n).style.left = '0px';
       document.getElementById('sublist'+n).parentNode.style.position = 'relative';
    }
    
    function initfunc(){
    
       if(document.getElementById('mainnavigation')){
       var menuwrapper = document.getElementById('mainnavigation').getElementsByTagName('UL');
       var counter = 0;
       for(counter = 1; counter < menuwrapper.length; counter++){
          menuwrapper[counter].setAttribute('id','sublist'+counter);
          var sublist = document.getElementById('sublist'+counter);  
          addEvento(sublist, 'mouseout', hider (counter), false);   
          addEvento(sublist.parentNode, 'mouseover', shower (counter), false);
          addEvento(sublist.parentNode, 'mouseout', hider (counter), false);
       }
    
       }
       
    }
    Ian Anderson
    www.siteguru.co.uk

  3. #3
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    Not tested ...

    Code:
    function hider (n) {
       document.getElementById('sublist'+n).style.left = '-1600px';
       document.getElementById('sublist'+n).parentNode.style.position = 'static';
    }
    
    function shower (n) {
       document.getElementById('sublist'+n).style.left = '0px';
       document.getElementById('sublist'+n).parentNode.style.position = 'relative';
    }
    
    function initfunc(){
    
       if(document.getElementById('mainnavigation')){
       var menuwrapper = document.getElementById('mainnavigation').getElementsByTagName('UL');
       var counter = 0;
       for(counter = 1; counter < menuwrapper.length; counter++){
          menuwrapper[counter].setAttribute('id','sublist'+counter);
          var sublist = document.getElementById('sublist'+counter);  
          addEvento(sublist, 'mouseout', hider (counter), false);   
          addEvento(sublist.parentNode, 'mouseover', shower (counter), false);
          addEvento(sublist.parentNode, 'mouseout', hider (counter), false);
       }
    
       }
       
    }
    That was exactly what I've been trying but it doesn't work. It seems logical though so that's why I'm stuck.


  4. #4
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    OK. Go back to your original initfunc(). Then take a look at event.Callee or something similar, that could be used in the shower and hider functions to get the ID of where the event originated. I have seen this done before but I don't recall exactly where or how.
    Ian Anderson
    www.siteguru.co.uk

  5. #5
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by siteguru View Post
    OK. Go back to your original initfunc(). Then take a look at event.Callee or something similar, that could be used in the shower and hider functions to get the ID of where the event originated. I have seen this done before but I don't recall exactly where or how.
    Ok, I'll see if I can find something along those lines. Thanks for the help so far . (if anyone else passes by that knows a solution, don't hold back to post ).

    Of to look for event.cal***


  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    An off-the-wall suggestion ...

    Code:
    function hider (n) {
       this.style.left = '-1600px';
       this.parentNode.style.position = 'static';
    }
    
    function shower () {
       this.style.left = '0px';
       this.parentNode.style.position = 'relative';
    }
    
    function initfunc(){
    
       if(document.getElementById('mainnavigation')){
       var menuwrapper = document.getElementById('mainnavigation').getElementsByTagName('UL');
       var counter = 0;
       for(counter = 1; counter < menuwrapper.length; counter++){
          menuwrapper[counter].setAttribute('id','sublist'+counter);
          var sublist = document.getElementById('sublist'+counter);  
          addEvento(sublist, 'mouseout', hider, false);   
          addEvento(sublist.parentNode, 'mouseover', shower, false);
          addEvento(sublist.parentNode, 'mouseout', hider, false);
       }
    
       }
       
    }
    Inspiration came from http://www.quirksmode.org/js/events_advanced.html
    Ian Anderson
    www.siteguru.co.uk


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
  •