SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish Dropdown Menu Mouse Out Event Issue

    Hi All

    I am implementing the Suckerfish Dropdown menu solution, see my test at:

    http://www.newforest-online.co.uk/ch...t3/default.htm

    Following the instructions from:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    The problem that I have is with the Javascript in the sfHover function, which controls the appearance/disappearance of the dropdowns in IE. I have the menu links contained within a table. Things work fine until I put a table or image underneath the table that contains the menu. Then I have a problem in IE, because the mouse out event is triggered as soon as I mouse over the table underneath, cutting out the dropdown too soon (e.g. in my example go to websites menu item, and try moving down the dropdown menu, and you will find it cuts out as soon as you go further than the first item).

    Below is the sfHover function code, and it is premature activation of the code sfEls[i].onmouseout=function() that is causing the problem. Does anyone have any thoughts on what I could do to rectify this? I want to be able to use a table underneath the menu so I am not sure how I can achieve this. Any thoughts appreciated.


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


    Rgds

    Accelerator

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK people, I've found out what the problem was. I set CSS padding on the Li element in the menus. If I remove the padding, the mouseout event no longer gets triggered.

    Rgds

    Accelerator


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
  •