Jquery mouseout triggers when cursor is still over the element - javascript

Thanks in advance to all willing to help. My riddle is the mouseout effect in jQuery - I'm trying to get build a function that would move an element up and down inside the container, indefinitely. When hovered, the moving should stop and stay stopped until the cursor leaves the element completely. What happens though, is that mouseover event triggers all right, however, the mouseleave event is triggered right after, when the cursor is still over the element, so the animation breaks.
Here's simple HTML:
<div id="container">
<div class="element">Some text</div>
<div class="element">Some other text</div>
<div class="element">Some more text</div>
</div>
The moving element is positioned absolutely by javascript over the top element and moves down and up, here's the example on jsfiddle
Did anyone else have to deal with this? thanks

I think you need to pull your mouseenter and mouseout events outside of your animate function. Everytime you call the animate function you are adding another mouse event to each element. This is causing it to call your animate function multiple times when you mouse out.
Here's a fiddle, I added a counter to see how many times animate function is being called.
var counter = 0;
function animate(el, dir) {
$("#count").val(counter);
counter++;
Mouse over and out a couple times and you can see that it's compounding the animate calls every time you mouse out.

Related

Strange thing with onmousemove javascript

Hi guys:)If I pass on the div in the example with mouse's pointer the function print in console two times,this menans that onmousemove event is triggered two times.I have printed also the coordinates of mouse's pointer and how you can see in the image below,i don't move also verticallylly but only horizontally.How is possible that onmousemove event is triggered considered that the div is 1 pixel width?How is possible that onmousemove event is triggered two times considered that the div is 1 pixel width?
<div id="div1">
</div>
#div1{
height:200px;
width:1px;
background:red;
}
document.getElementById("div1").onmousemove= function(){
console.log("in mousemove function");
console.log(event.clientX);
console.log(event.clientY);
};
You bind onmousemove which will be called every time the mouse is moved over the element. When you hover the div you sometimes move the mouse down resolving in additional calls to the handler.
It will be more clear if you add more width to the div.
What you properly wants is onmouseenter which will be called once when you enter the div:
document.getElementById('div1').addEventListener('mouseenter', function() {
console.log('mouse entered div');
});
change the console.log to alert and you will notice that the event is fired only once. It works for me. I tried using the same code just that executed javascript on DOM ready.
I also changed the width to 20 pixels so as to be sure about it.
Here is a fiddle of your example code: https://jsfiddle.net/jy8u4y2m/
You will notice that while your div is 1px wide, it is also 200px high. This means that if you enter the div with your mouse, onmousemove will be triggered. However, if you then move your mouse down before exiting the bounds of the div, the event will continue triggering. My assumption is that you are getting multiple calls because you aren't moving your mouse perfectly horizontal.
As #andlrc posted, if you want a single trigger, you should be using mouseenter instead.

Making flip effect on hover, on blur go fade with CSS + jQuery

I have to do something like pexeso. When you hover element, it will flip front to back side (they have different texts) and when your mouse is out, it will fade from back to front side. This is example HTML, how it looks like:
<div class="pexeso">
<div class="pad">
<div class="front">1</div>
<div class="back">ONE</div>
</div>
etc...
There is some CSS, to look it well (it is in the jsFiddle source, attached bellow). Then Handling mouse enter and leave with jQuery:
$('.pexeso .pad').each(function() {
var el = $(this);
var back = el.find('.back');
el.on('mouseenter', function() {
back.removeAttr('style');
el.removeClass('before-fade').addClass('do-flip');
});
el.on('mouseleave', function() {
el.removeClass('do-flip').addClass('before-fade');
back.stop(true, true).fadeOut(250, function() {
el.removeClass('before-fade');
});
});
});
Here is full example in jsFiddle: DEMO
Try to hover any element from left or right side of your screen, it will works great. But now try to hover from top or bottom, it will do weird things to graphic and also, sometimes it stucks and remains invisible.
Probably know the problem: When you hover from top or bottom, it will start flipping, and when you are too slow, it also fires event mouseleave, because flipping is in progress and you are actually at empty space. Then it calls 1st function, then second, a lot of time and it got stuck. But I don't know how to fix it, can you help me?
Ok guys, don't try anymore, I already found a solution. Whoever is interested, how I fixed it, here is solution:
In CSS, make .back element always visible, so find this line &.do-flip { and add this style .back { display: block !important; }
In jQuery, there is no need to have back.removeAttr('style');, also this did mess with opacity style (fading effect)
Now wrap every "pad" with parent, for example .pad-container and give him exact sizes as .pads, now we will manipulate with him
Each function will take these wrappers, not "pads", so in jQuery $('.pexeso .pad-container').each(function() {...
Bind events mouseenter and mouseleave on this wrapper, but changing classes remain on "pads" and fadeOut effect on back element. Also, add function .show() to this back element before fadeOut.
That's all. Here is updated version: UPDATED DEMO

if cursor inside div then display block jquery

Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc

Anyone know a mousehover trick/alternative which triggers when scrolling with keyboard

Is there an alternative method or a trick to the hover method which can trigger a function when the cursor moves from one div to another as the user scrolls the page.
I have sort of got it working using some javascript (jQuery) on the hover event of the current post div. However, I've noticed the hover event only triggers when the mouse is actually moved. If the page is scrolled using the keyboard (page) up/down it does not trigger.
(I can note that soup.io for instance has found a way to get this working, but I can't find how they do it)
Unfortunately, it's quite complicated; you can no longer rely on the onMouseOver event - the only event that triggers when a page is scrolled is onScroll. The steps involved:
Go through elements, storing each of their widths, heights and offsets (distance from left/top of screen) in an array.
When the onScroll event is triggered check the last known position of the cursor against all chosen elements (go through the array) - if the cursor resides over one of the elements then call the handler.
Quick (unreliable) prototype: http://pastie.org/507589
Do you have a sample? I'm guessing that the layout of the elements on the page are blocking the mouseover event. My simple example below works as you described it should. With the cursor at the top of the page and using keyboard navigation, the mouseover events are fired.
<html>
<body>
<script>
function log(text)
{
document.getElementById('logger').value += text + "\n";
}
</script>
<div id="div1" style="background: yellow; height: 100px;margin-top: 100px" onmouseover="log('mouseover div1');">
div1
</div>
<textarea id="logger" cols="60" rows="12" style="float:right;"></textarea>
<div id="div2" style="background: red; height: 1000px" onmouseover="log('mouseover div2');">
div2
</div>
</body>
</html>
You're looking for the mousewheel event.
document.getElementById('myDiv').onmousewheel = function() {
alert('You win!');
alert('Seriously! It's just like that');
};
I only tested this in Chrome (webkit)

Javascript "onMouseOver" triggering for children?

I can't tell if this is a result of the jQuery I'm using, but this is what I'm trying to do:
<div class="info" style="display: inline;"
onMouseOut="$(this).children('div').hide('normal');"
onMouseOver="$(this).children('div').show('normal');"
>
<img src="images/target.png">
<div class="tooltiptwo" id="tooltip"
style="font-weight: normal; font-size: 0.8em;" >TOOLTIP TEXT</div>
</div>
To anyone familiar with basic CSS and jQuery, I'm trying to add a simple animation to my tooltips. The problem is the triggering of such an animation. It seems that when the animation happens, if the user moves their mouse over the tooltip, the animation will go into a loop of showing and hiding until the user moves the mouse away. This is an undesired effect, as I want the animation to go away just once, when the mouse moves out of the parent div. I've positioned my CSS so that the tooltip appears away from the parent div, but regardless the actions should be triggering only on the parent, and not any of its children.
So basically, how would I go about achieving this? I want my hover/out state on my parent element to trigger a function (an animation) on the children of that parent, without the hover/out states of the children doing anything. It seems that the normal method of onMouseOver and onMouseOut is triggering even for the children of the parent that the method belongs to, which is causing some rather undesirable effects.
Note that I'm new to jQuery (although its amazing so far, I want to coat my site in its goodness if I can) and if there is a better way to achieve the hover/out states using jQuery I probably don't know about them.
edit: actually this is a much better solution (credit):
$('.info').bind('mouseenter', function() {
$('div', this).show('normal');
});
$('.info').bind('mouseleave', function() {
$('div', this).hide('normal');
});
// hide the tooltip to start off
$('.info div').hide();
edit2: in response to the comments, i think i would suggest structuring your HTML differently then, or binding the event to the sibling element (the image) instead:
<div class="info">
<img src="stuff.jpg" />
</div>
<div class="tooltip"></div>
or binding on the image:
$('.info img').bind('mouseenter', function() { etc... });
$('.info img').bind('mouseleave', function() { etc... });
Did you follow this tutorial ?
Especially the mousemove part, where he constantly sets the positioning values left and top to align the tooltip next to the cursor. the X and Y coordinates are called via .pageX and .pageY. And he also adds a little offset of 15 px so the tooltip is not directly below the cursor.
That way, the mouse can not be over the tooltip, even the fadeout phase. Hence no infinite loop
Bind it to the parent div, and use stopPropagation to stop it from being binded to your tooltip. Like this:
[code]
$('.info').bind('mouseover', function(e) {
e.stopPropagation();
$(this > 'div').show('normal');
});
$('.info').bind('mouseout', function() {
$(this > 'div').hide('normal');
});
// hide the tooltip to start off
$('.info div').hide();
[/code]
However, I too use pageX and pageY to make my tooltips move with the cursor.

Categories