/    Sign up×
Community /Pin to ProfileBookmark

Onmouseover and out event bubbling

Copy linkTweet thisAlerts:
Feb 05.2010

have a small div above (hover) a big one.
I assign onmouseover and onmouseout events to the wrapper div.
For image caption roll-over animation.

The problem is when the mouse is above the caption itself, causing an unwanted result(probably event bubbling).

And another problem: sometimes when you move mouse from outside to container you get a a triple debug sequence: (it should be just 2):
-I am over- -I am out- -I am over-
(firebug console)

How to make it work? (no jquery)
must work on all browsers.

Demo: [url]http://verror.netai.net/test.html[/url]

The wanted result:
When mouse moved over the image, only mouseover event should be raised once!

When mouse moved out from the image, only the mouseout event should be raised.

when mouse is over the captionm it should be treated as if the mouse is still on the image. (no flickering)

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@luppinauthorFeb 06.2010 — bump
Copy linkTweet thisAlerts:
@vwphillipsFeb 06.2010 — [CODE] <script type="text/javascript">
var intervalID;

function RollOverDescription(direction){
var descriptionDiv = document.getElementById("imageDescription");
descriptionDiv.style.height = 'auto';
var descriptionFullHeight = descriptionDiv.offsetHeight;
clearInterval(intervalID);
if (direction == 1) {


// console.log("-I am over-");
descriptionFullHeight = descriptionDiv.offsetHeight;
AnimateRollOver(descriptionDiv, 0, descriptionFullHeight, 5);

}
else {

// console.log("-I am out-");

AnimateRollOver(descriptionDiv, descriptionFullHeight, 0, -5);
}
}

function AnimateRollOver(obj, current, fullHeight, step){
var dir = step > 0 ? 1 : -1;
intervalID = setInterval(function(){
if ((dir * obj.offsetHeight) >= fullHeight) {
clearInterval(intervalID);

}
obj.style.height = obj.offsetHeight + step < 0 ? 0 : obj.offsetHeight + step + 'px';

}, 15);
}
</script>
[/CODE]
×

Success!

Help @luppin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...