homepage Welcome to WebmasterWorld Guest from 54.161.192.61
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Cancel OnMouseOver Event on nested divs
onmouse event on nested divs
greatmetro

5+ Year Member



 
Msg#: 3729024 posted 6:39 pm on Aug 22, 2008 (gmt 0)

Hello everyone,
I have a container div that has an onmouseout event that basically shrinks it's size, and within this div, I have two block level elements, a nested div and an image. What's happening is while the mouse is still within the container div, and mouseover's either the nested div or the image, it triggers the onmouseout event on the container event.

For an example, see <snip>

How can I cancel the onmouseout event when it goes into the nested block elements, but keep it active for when the mouse actually leaves the outside edge of the container div?

Reps to the first fix!

Thanks

[edited by: DrDoc at 9:20 pm (utc) on Aug. 23, 2008]
[edit reason] No URIs, please. See posting guidelines. [/edit]

 

csuguy

5+ Year Member



 
Msg#: 3729024 posted 3:30 am on Aug 25, 2008 (gmt 0)

I would make a global variable in javascript called 'currentContainer' - update this everytime you enter/leave a div. Then code the onmouseoutevent to look and see if the currentContainer is really just a div within the container - if so then don't do anything.

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3729024 posted 2:16 pm on Aug 25, 2008 (gmt 0)

Perhaps you could use setTimeout and cancelTimeout.

Instead of shrinking the size onmouseout, call setTimeout to shrink the size after some small amount of time (maybe 300ms). Then, add an onmouseover listener that will call cancelTimeout to prevent the method for shrinking the size from being called. Therefore, if you are mousing over any of the nested items, the call to shrink the size will always be cancelled before it can call that method.

greatmetro

5+ Year Member



 
Msg#: 3729024 posted 7:20 pm on Aug 25, 2008 (gmt 0)

Fotiman,
thanks for the reply, your response worked the best.

I set the onmouseout event on the container div to:

onmouseout="t=setTimeout('hideDiv()',300);"

and on the nested div,

onmouseover="clearTimeout(t);"

Worked like a charm! Thank you, I wasn't aware of a clearTimeout function.

Thanks everyone!

greatmetro

5+ Year Member



 
Msg#: 3729024 posted 7:21 pm on Aug 25, 2008 (gmt 0)

csuguy, thanks for your reply as well, unfortunately, the onmouseout fires before the mouseover, so I couldn't update any global variables before the onmouseout fired. I tried it with a setTimeout, but it got messy.

csuguy

5+ Year Member



 
Msg#: 3729024 posted 9:23 pm on Aug 25, 2008 (gmt 0)

Ah well - glad you got it working!

Ryan

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved