Multiple conditions before executing function - javascript

I call this function I have getMouseXY, whenever the mouse moves. Works great for tracking this element with the mouse. Like so:
document.onmousemove = getMouseXY;
But I'd like to layer in some logic, so it's only when the mouse is over this one element AND the mouse is moving. I thought this would work, but it doesn't:
document.getElementById("circle1").onmouseover && document.onmousemove = getMouseXY;
Any ideas? Help is much appreciated!

You're probably looking for
document.getElementById("circle1").addEventListener('mousemove', getMouseXY);
which will fire whenever the mouse moves over the element with the ID #circle1
AWESOME FIDDLE

Related

Catch CSS value before mouse leaves

I'd like to get the current value of my transform: rotate, just before the mouse leaves. In the current state, the event seems to be caught when the mouse has already left my button and returns 0deg which is true at this moment.
My point is to play the same animation in reverse mode. For that, I need to get the current value of the rotation and make a transition from Xdeg to 0deg. I firstly tried to accomplish it in full CSS but the animation is suddenly broken when mouse leaves. I also tried to play another animation when the mouse is not on the button but the result is not as clean as I expected since it begins from a predefined value and not the current rotate value.
You can find my fiddle here : https://jsfiddle.net/yn460w6j/
Thanks to #lakenen for the degree function, btw !
I little play with that, use only js to solve this. I'm adding class to spinner when mouseover on button. Next, when mouseleave I am setting listener on stop animation iteration. When it complete I just remove animation class from spinner.
var $spinner = $("#random_glyph");
var $button = $("#random_button");
$button.on("mouseover", function() {
$spinner.addClass('animation');
});
$button.on("mouseleave", function() {
$button.bind("webkitAnimationIteration, mozAnimationIteration, animationiteration", function(e){
$spinner.removeClass('animation');
$(this).unbind(e);
});
});
https://jsfiddle.net/9jLstovx/

jQuery: Check if mouse is over an animation?

This is pretty much what I'm working on: https://jsfiddle.net/atg5m6ym/2625/
I'm animating a div with jQuery to move left, then logging to the console when I hover over the div and when I move my mouse away from it:
$("div").animate({left: '250px'}, 6000);
$('div').hover(function() {
console.log("Mouse hovered on div!");
}).mouseleave(function() {
console.log("Mouse left div!");
})
Naturally, the program will run console.log("Mouse hovered on div!"); once I put my mouse on the element.
However, if I leave my mouse idle and the animated element moves onto it, nothing in $('div').hover(function(){}) will run. I have to move my mouse onto the element for the code to run, not let the element come to the mouse.
The same thing also happens if I hover onto the element, and then leave my mouse idle. Nothing in $('div').mouseleave(function(){}) will run after the element leaves, until I move my mouse from its position.
Is there any way to work around this? I am working with animated divs and I need code to run even if the mouse is idle and the divs pass through it.
Manually take the mouse's last known position and compare it to the position of the circle. This is kind of extensive but it should get you the right results.
Here is a JSFiddle:
https://jsfiddle.net/3vpaoj59/
$("div").animate({left: '250px'}, 6000);
$(document).ready(function() {
// record down the position of the cursor
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX;
cursorY = e.pageY;
}
// boolean to know if hovered or not, and to know whether to report in console.log
var hover = false;
// function to call by setinterval to check if mouse is within radius
function checkMouse(){
// find the centerpoint of the circle by taking its position then adding half its width/height to each coordinate
var left = $("#foo").offset().left+$("#foo").width()/2;
var top = $("#foo").offset().top+$("#foo").height()/2;
// use pythagorean theorem to find distance between two points
var xdist = Math.pow(Math.abs(cursorX - left),2);
var ydist = Math.pow(Math.abs(cursorY - top),2);
var hypotenuse = Math.round(Math.sqrt(xdist+ydist));
// check if the distance is less than radius
if(hypotenuse <= $("#foo").width()/2 && !hover){
// if true and not already reported true, report then fix
console.log("mouse hovered on div!");
hover = true;
} else if (hypotenuse > $("#foo").width()/2 && hover){
// if false and not already reported false, report then fix
console.log("mouse left div!");
hover = false;
}
}
// repeatedly call this
setInterval(checkMouse, 100);
});
I changed the div's ID to "foo" for convenience. Make sure to do this as well so that the code works for your project, or modify the JS to not use "foo".
Explanation:
The reason why your problem was occurring was because your mouse's coords are only updated every time you move your cursor, and that's when hover states are checked by .hover. As such, we need to emulate the event that determines hover and call it repeatedly even when the cursor hasn't moved to make sure the hover state is updated.

Video on mousemove

I'm having problems while trying to play a video as long as mouse moves. I want it's time to follow mouse, as if the mouse was the time handler.
I have this code. It works fine on Internet Explorer but on Chrome or Mozi time is not fluid, as it has something to do with refreshing times. Video plays with difficult.
<script type="text/javascript">
var mouseX;
$(document).mousemove( function moveFunc(e) {
mouseX = e.clientX;
var timV = $(".video").get(0).duration;
var valV = (timV*mouseX/$(window).width());
$(".video").get(0).currentTime = valV;
});
</script>
Could you help me?
Firefox and Chrome stopped firing mousemove events for every mouse position update on the window and document in an attempt to make pages more responsive.
You can fix it by binding your event to something more specific like the video element itself or any wrapper element.

How to identify REAL mouse movement when entering fullscreen mode

I have the problem, that I need to know if the user actually moved his mouse for real when entering fullscreen, or if it just is a programatically side effect of entering the fullscreen.
Because, when entering fullscreen, the mouse Y coordinates change automatically because the mouse moves upwards on the absolute screen position (since the top navigation of the browser disappears). And since every browser brings a notification in fullscreen mode, this very notification triggers a mousemove event.
So, this makes it very painful to find out, whether the user acually move the mouse, or not.
Is there a solution to identify REAL mouse movement?
$(document).on('mousemove', function(event){
/* gets also triggered when just entering fullscreen,
but without actual movement of the physical mouse..
how can this be identified/ignored?
*/
});
JS Fiddle
What I've tried so far
I tried already relativating the mouse position by using something like window.screen.top - but this seems not to be implemented yet by any browser so far.
I don't think there's anything formally implemented as yet to detect full screen. There's a fullscreenchange as part of the Fullscreen API but it's still experimental and requires vendor-specific prefixes.
So, basically you'll have to get around that limitation with some tricks, like intersecting the resize event and skipping whatever logic you are running on mousemove. Here's an example...
var resizing = false;
$(document).on('mousemove', function(event){
if(resizing == false){
$('p').text(event.pageX + ':' + event.pageY);
console.log("moving");
}
});
$(window).resize(function(){
resizing = true;
setTimeout(function(){
resizing = false;
}, 4000);
});
This example simply defines a flag that determines whether the window is resizing or not, if resizing the onmousemove logic is skipped. Particularly I hate to use setTimeout with an arbitrary time to switch off the resizing flag, but if your requirements are not so strict it can get the job done beautifully
Why don't you incorporate a delay (for example 0.5 seconds) where you ignore all mouse inputs. After the delay, any mouse movements are likely to be from the user...
I solved it now by saving the mouse coordinates, and check if they change - while I force one mousemove event after fullscreen in order to update the coordinates once.
$(document).on('mousemove', function(event){
if(event.pageX == $(this).data('mouseX') && event.pageY == $(this).data('mouseY'))
return;
$(this)
.data('mouseX', event.pageX)
.data('mouseY', event.pageY)
;
});
$(document).mousemove();

Prevent Circle from Flickering in KineticJS

When a user places his mouse cursor over/near the outline of the Polygon, an anchor should appear and follow the position of the mouse, but snapping to the outline of the Polygon.
Problem: The anchor seems to flicker when the mousemove handler function updates the position of this anchor. What's causing the flickering and the slow update? The KineticJS example here appears to update pretty quickly.
Also, the anchor is not snapping to the outline/stroke of the Polygon. How can this effect be achieved?
JSfiddle
Your mousemove function is moving the anchor. Once the anchor is moved your mouse is no longer over the polyHitArea so your mouseleave event is firing and hiding the anchor.
Edit
The best way that I can think of off hand to prevent this from happening is to place the setVisible(false) code into a setTimeout call -- and have a mouseenter event on the mouseoverAnchor call clearTimeout.
var polyHitArea._timeout = 0;
polyHitArea.on('mouseover', function(e) {
clearTiemout(polyHitArea._timeout);
mouseoverAnchor.setVisible(true);
stage.draw();
});
polyHitArea.on('mouseleave', function(e) {
clearTimeout(polyHitArea._timeout);
polyHitArea._timeout = setTimeout(function(){
mouseoverAnchor.setVisible(false);
}, 25); // 25 ms enough time?
stage.draw();
});
mouseoverAnchor.on('mouseenter', function(e) {
clearTimeout(polyHitArea._timeout);
});

Categories

Resources