Using transitionend inside a mousemove event - javascript

My page has two divs (#red and #blue) and a mousemove event that is bound to the document object - this event cannot be changed by me. (Link to JSFiddle)
When the cursor enters the red div, the blue div is pushed down by 50px. The mousemove handler does this by
adding attribute data-moved to the blue div (this attribute adds a transition effect for the top property of the blue div and signifies that the div has been moved)
setting the top position of the blue div to 50px.
This works as expected.
When the pointer exits the red div, the blue div is pushed back up to its original position using the same transition effect that was used to push it down. To do this, I first check if the blue div has been moved (i.e. if restore.hasAttribute('data-moved') is true). If it has been moved, I bind transitionend and transitioncancel events to it and then reset its top position to 0. The change in the value of the top position triggers the transition effect, which in turn triggers the transition event. Once the transition ends or is cancelled, the transitionend and transitioncancel event handlers remove the data-moved attribute before unbinding themselves from the blue div.
This works fine 99.9% of the time but very rarely the transition event handlers fail to fire and the data-moved attribute is not removed from the blue div once it has been restored to its original position:
This problem is very difficult to reproduce and seems to occur randomly when the cursor is made to very rapidly exit and re-enter the red div as shown below:
I really want be sure that I understand what's going on here. Since I can't reproduce the problem at will, I'm not sure how to go about troubleshooting it.
The problem seems to be that the transition events don't fire when the cursor enters and exits the red div very quickly. My browser (Chome v87) is compatible with both transitionend and transitioncancel. The only other explanation I can think of is that when the cursor enters the red div, the top value's transition is queued. But if the cursor leaves red quickly enough, before the transition has had a chance to start, then the top value is unchanged when the mousemove handler queries it again and as a result, the transition events aren't fired. Is this correct?
According to W3:
Transitions are a presentational effect. The computed value of a
property transitions over time from the old value to the new value.
Therefore if a script queries the computed style of a property as it
is transitioning, it will see an intermediate value that represents
the current animated value of the property.

Related

Javascript\Jquery mouse cursor - Inconsistencies when hovering items

I'd like to replace the mouse cursor on my website with a custom one, composed of two elements:
a cursor;
a trail that follows the cursor and lags behind it.
Doing that with jquery is extremely easy.
1) You hide the default cursor in CSS:
html, body {cursor:none;}
2) You create two different divs (one for the cursor itself and one for the trail) and style them:
<div id="mouse_cursor" class="mouse_cursor"></div>
<div id="mouse_trail" class="mouse_trail"></div>
3) You create the logic for each one of them:
function moveCursor(e) {
$('#mouse_cursor').css({'left' : e.pageX,'top' : e.pageY });
}
$(window).on('mousemove', moveCursor);
function moveTrail(e) {
TweenMax.to('#mouse_trail', 0.35, {
css: {left: e.pageX,top: e.pageY},
ease:SlowMo.easeIn
}
)};
$(window).on('mousemove', moveTrail);
(In my case the trail effect is made using Greensock's GSAP).
Now... this works perfectly as long as the cursor style isn't changed. Here's a fiddle, for your reference: https://jsfiddle.net/collederfomento/jvy1zfg8/27/
I'd like to change the style of the cursor once it hovers specific elements, however, and that's where I am encountering a few issues.
The way I have attempted to do that is the following:
1) Create a function bound to the mouseenter \ mouseover events that adds a class to the cursor if it's hovering the element:
$(".hover").bind( "mouseenter mouseover", function() {
$("#mouse_cursor").addClass("mouse_cursor_hover");
});
2) ... and then a second function that removes the class once the cursor is not hovering the element anymore:
$(".hover").mouseleave(function() {
$("#mouse_cursor").removeClass("mouse_cursor_hover");
});
3) Lastly, of course, I added the style for the "hover" cursor:
.mouse_cursor_hover {width:300px;height:300px;}
As you can see in this fiddle ( https://jsfiddle.net/collederfomento/z4e1qjbc/13/ ) the hover event is not firing properly, and the mouse cursor flickers.
I have tried several other approaches (using Javascript event listener rather than the above mentioned functions, using the css property rather than toggling a class, etc.) but they all behave in the same way.
What's curious is that if I remove the functions that make the cursors move, then the hover event is handled flawlessly. I believe the combination of the two functions is causing the issue, but I have no clue why (or how to solve it).
I think the cursor and the trail elements are interfering with the hover events. Even though they are at a high z-index, the browser still has to take them into account to figure out which element is actually getting hovered. The mouse cursor is still going over them after all, since they are not a “real” cursor, but actual elements positioned in that place.
Adding pointer-events none to both of them seems to fix the issue for the most part (checked in Chrome and Firefox, in both it seemed to significantly improve), so please give that a try:
.mouse_cursor,
.mouse_trail {
pointer-events:none;
}
https://jsfiddle.net/aur39py4/1/
I am assuming that you are not going to need any sort of hover effect on the cursor and trail themselves, so setting pointer-events:none should not have any adverse effects on the rest of what you’re doing on the page.

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.

Toggle CSS transitions on and off with JavaScript

All,
I've got a situation in which I'm using CSS transforms/transitions to animate the horizontal position of a div element. Specifically, I'm using...
// in CSS
myDiv {
transition: transform 0.4s ease-in;
}
// in JavaScript, where "div" contains a reference to the div element
div.style.transform = translate3d(Npx, 0px, 0px);
...and it works well. That is, every time I call that line of JavaScript with a new value for N, the div smoothly animates from its current position to its new position.
However, there are times when I need position the div first WITHOUT a transition, then MOVE it WITH a transition. E.g.,
Have the div JUMP (instantly) to 100px, then transition (over 400ms) to 200px
Later, JUMP the div to 500px (without a transition), then transition it to 600px
In other words, I'd like to be able to move a div, and be able to control whether the new position is applied instantaneously, or with a transition.
Complicating matters, I have event listeners that fire when the transition is complete; these listeners should NOT fire if/when I move the div without a transition. I'm also supporting multiple browsers, so I have to deal with all the vendor prefixes.
In pseudo-code, I guess it would look something like this:
Remove the event listeners for the transitionEnd event
Set the transition property to none
Change the position of the div (e.g., [div].style.transform = translate3d([starting position]px, 0px, 0px))
Add the event listeners for the transitionEnd event
Set the transition property to have a transition (e.g., [div].style.transition:all 0.4s ease-in)
Change the position of the div (e.g., [div].style.transform = translate3d([ending position]px, 0px, 0px))
With all the vendor prefixes, that's too messy and complicated to be the best way to accomplish this. (I'm not even sure if it works...)
So, what's the best way to toggle transitions/transformations on and off?
[UPDATE]
Thanks to a suggestion from Chandranshu, I've tried toggling a class that includes the transitions.
So, my pseudocode looks like this:
Remove the transitions class
Apply the starting position
Restore the transitions class
Apply the ending position
However, it looks like, if I execute all four steps in a single JavaScript function - it seems to ignore steps 1-2, as though it's "netting" the results of all four steps.
Here's a jsfiddle that demonstrates this: http://jsfiddle.net/bUvX3/
Instead - if I execute steps 1 and 2, then execute steps 3 and 4 after a short delay (e.g., by using a setTimeout), it works: http://jsfiddle.net/2mhcv/
So, I guess that's a solution, except that I really don't like having to add an arbitrary delay, especially when so much emphasis is placed on fast, responsive UIs.
Thanks in advance!
I think you have over-complicated this :). Here's how I'd approach this problem:
Add a class to your divs, say movable.
Declare all your transition rules and transitionEnd callbacks for .movable.
Nothing to do if you want to move your div smoothly.
When you need to move your div w/o a transition, remove this class, move your div and add this class back: $('div').removeClass('movable').animate({transform: 'translate3d(...)' }).addClass('movable')
UPDATE:
Finally, I've got what you wanted: http://jsfiddle.net/2mhcv/1/. The only change here is that instead of a delay of 20ms, I'm using a delay of 0! setTimeout() causes a repaint to be triggered and that ensures that the first animation is executed before the next one begins.
UPDATE 2:
This version works without a setTimeout() call: http://jsfiddle.net/2mhcv/2/. Realizing that a repaint is all that is needed, I just added a line there to read a compute CSS property such as display. You could have read any other computed property to get the same effect.

Send mouse event to element via javascript

So I have an element behind another, but it's still visible(its covered only partially by the element itself, but is otherwise completely covered by the margin attribute of the element above). I want to trigger a mouse event when I mouse over, but it doesn't get passed to it because of the element in front. I know how to calculate if I am over it and how to point to it, but I don't know how to send it the event onmouseover or hover or onmouseout.
If it helps I would be pointing at it by using document.getElementById("<calculated id>"). I know this works because it's ID is based off of its location within a grid, so I just have to calculate the position of the mouse and relate it to the grid.
Also the event that is supposed to happen(but isn't because of the things in front of it), is a :hover that triggers a simple transition animation via CSS.
document.getElementById('elementInFront').addEventListener('mouseenter', function(){
document.getElementById('elementBehind').DoYourStuff();
});
Does this work? I'm not sure if I understand your intention.
var item = document.getElementById("CalculatedId");
item.addEventListener("mouseover", func, false);
function func()
{
console.log("Hovered");
}
You can use the css property
pointer-events: none;
On the top element. This will allow all mouse events to "fall-through" to the element in the back. Unfortunately this doesn't work in IE, the only simple alternative for that is to make the front element's background transparent

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

Categories