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);
});
Related
I am trying to add scroll event listener to my three.js project.
I tried this code but it doesn't work and I don't know why.
window.addEventListener("scroll", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
I tried OrbitControls.js and TrackballControls.js, but it zooms. I don't want the zoom feature.
Any ideas?
The scroll event will only fire if you do actual scrolling by having more content than can fit on the screen. If you have the canvas at 100% width and height the wheel won't send any scroll events. Try the wheel event instead.
window.addEventListener("wheel", function(e) {
console.log("scrolled")
// code to increment object.position.z
}, true);
What if you add your event on your canvas instead of the window element? If you can provide some code that would help also!
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/
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
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();
In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent