SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Animated dropdown menu

    Hi all,

    I'm working on an animated Javascript menu, but I'm having some trouble with my event handlers.

    The menu can be seen in action here: http://www.whatstyle.net/bla/menu/ (CSS is inline)
    The Javascript can be found here: http://www.whatstyle.net/bla/menu/menu.js

    The problem I'm encountering is that the "mouseout" event handler gets triggered way too early (it gets triggered when hovering over sub-items). Which is odd, 'cause the list-item that has the onmouseover event handler should grow along with the UL inside it, and therefore, no onmouseout handler should be triggered, if I'm not mistaken.

    Some pointers would be appreciated

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I sort of fixed it.

    A couple new problems now arise, which I'm gonna study now.

  3. #3
    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)
    Cool stuff!

    Expect all child elements (including text nodes) to generate mouseout events and bubble up to your LI. So the listener should make sure the event target is an LI before proceeding.

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Cool stuff!

    Expect all child elements (including text nodes) to generate mouseout events and bubble up to your LI. So the listener should make sure the event target is an LI before proceeding.
    Hm, I'm using oldschool "element.onmouseover" event handlers, is it still necessary in this case?

    My menu works almost perfect now, only IE is making a mess out of it..

  5. #5
    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)
    Hm, I'm using oldschool "element.onmouseover" event handlers, is it still necessary in this case?
    Yes. The listener will get all mouse over/out events generated by its child elements. In Gecko this includes text nodes.

    If you have added any expando properties to the LI this is an easy thing to check for. It looks like you are doing this in the 'over' listener, but not in the 'out' listener.

    Great work!

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    Yes. The listener will get all mouse over/out events generated by its child elements. In Gecko this includes text nodes.

    If you have added any expando properties to the LI this is an easy thing to check for. It looks like you are doing this in the 'over' listener, but not in the 'out' listener.

    Great work!
    Ah, thanks for that
    I will look into it.


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
  •