I have written this code to display a small panel when the mouse is over the regions, but I ended up with a terrible "wiggle" effect when I insert an image. How can i fix that?
Have a look at my codepen. Relevant excerpt:
$('.italia g').mouseover(function (e) {
var region_data = $(this).data('region');
$('<div class="info_panel">' +
'<img src=" ' + region_data.region_image + ' " >' +
'</div>'
).appendTo('body');
})
.mouseleave(function () {
$('.info_panel').remove();
})
.mousemove(function(e) {
var mouseX = e.pageX, //X coordinates of mouse
mouseY = e.pageY; //Y coordinates of mouse
$('.info_panel').css({
top: mouseY - 100,
left: mouseX - (($('.info_panel').width()/2)+175)
});
});
The issue is that the info window is right below your cursor when hovering an area.
As soon as the infowindow appears, the mouse is triggering the mouseleave event, as it is now hovering the area AND the infowindow, which is above the area.
Check using this:
$('.info_panel').css({
top: mouseY - 100,
left: mouseX - (($('.info_panel').width()/2)+175)
});
No wiggle effect anymore.
Related
I am trying to detect how many detect how many pixels the cursor is away from the center of the window.
Adding the returned value to a var using javascript or jQuery?.
Even better, if this could be attached to an element. So the var updates as you move and your mouse closer and further away from the elements centre point.
I'm not even sure this is possible hence why there is no code. Thanks
Is this what you want? attach onmousemove event to window and use window height&width subtracting current mouse position?
var disFromCenterX = 0,
disFromCenterY = 0
window.onmousemove = function(e) {
disFromCenterX = Math.abs(window.innerWidth/2 - e.pageX);
disFromCenterY = Math.abs(window.innerHeight/2 - e.pageY);
console.log("distance from center x: " + disFromCenterX);
console.log("distance from center y: " + disFromCenterY);
}
same logic on element
var disFromCenterX = 0,
disFromCenterY = 0
document.querySelector("#div").onmousemove = function(e) {
var rect = this.getBoundingClientRect();
disFromCenterX = Math.abs(this.clientWidth/2 - (e.pageX - rect.left));
disFromCenterY = Math.abs(this.clientHeight/2 - (e.pageY - rect.top));
console.log("distance from center x: " + disFromCenterX);
console.log("distance from center y: " + disFromCenterY);
}
#div {
height: 400px;
width: 300px;
border: 1px solid black;
}
<div id="div"></div>
I've just created #element and #box which detect if it's out of the viewport. If so, it should go above the cursor but here's my issue. When #box is out of the viewport it starts acting weird by flashing over and over. Hope you guys can help me. Cheers.
var box = $("#box");
var element = $("#element");
var PAGEX;
var PAGEY;
var elementTop;
var elementBottom;
var windowHeight;
element.bind({
mousemove: function (e) {
box.show();
PAGEX = e.pageX;
PAGEY = e.pageY;
elementTop = box.offset().top;
elementBottom = elementTop + box.outerHeight();
windowHeight = $(window).height();
if(elementBottom > windowHeight)
{
box.css({
top: PAGEY - 65,
left: PAGEX + 15
})
}
else
{
box.css({
top: PAGEY + 15,
left: PAGEX + 15
})
}
},
mouseleave: function () {
box.hide();
}
})
JSFiddle
The problem here is that you are doing your out-of-viewport check against the actual box location, rather than the location based on the mousemove. So, this works the first time the box would move out of the viewport - you adjust it back inside. But, the next time the mouse moves, your box is safely inside the viewport. So your check adjusts it based on the mouse position, and it gets put outside the viewport. The next time the mouse moves, the calculation works, and it gets adjusted back inside, and so on.
The fix is to change this:
if(elementBottom > windowHeight)
To this:
if(PAGEY + 15 + box.outerHeight() > windowHeight)
So that it is always calculating the out-of-viewport based on where the target location would be, and not where its current location is.
I want to move child element when dragging on parent and the element itself, and the parent shouldn't be moved.
here is my demo
As in the demo, I want to move the red box when either drag on it or drag on its parent (the background), but I couldn't compute the right position, could you help me?
Other question is why I can't offthe mousemove event when I set .off('mousemove', mousemove')
Thank you very much
I have done some changes. This works ;)
DEMO
$(function(){
var graph = $('.graph')[0];
var parent = $(graph).parent();
var lockX = 0;
var lockY = 0;
var mousemove = function(e){
$(graph).offset({
top: e.pageY + lockY,
left: e.pageX + lockX
});
};
parent.on('mousedown', function(e) {
lockY = $(graph).offset().top - e.pageY;
lockX = $(graph).offset().left - e.pageX;
$(this).addClass('draggable')
.on('mousemove', mousemove)
.on('mouseup', function(){
$(this).off('mousemove', mousemove)
})
event.preventDefault()
});
$('.graph').parent().on('mouseup', function(e) {
$('.draggable')
.off('mousemove', mousemove)
.removeClass('draggable');
});
});
EDIT
The only actual change I made to make it work was:
.offset({
// instead of: e.pageY - $('.draggable').outerHeight() / 2 + dtop
top: e.pageY + dtop,
// instead of: e.pageX - $('.draggable').outerWidth() / 2 + dleft
left: e.pageX + dleft
})
PS: In the example in the JS Fiddle I changed dleft and dtop respectively to lockX and lockY. Ofcourse, that is a pure semantical thing.
I am trying to create and effect where you have a vertical list, and when you hover it with your mouse, a separate "cursor" div should travel up and down vertically along this list, horizontally aligned with your pointer.
I am using this code:
$(document).mousemove( function(e) {
mouseY = e.pageY;
mouseX = e.pageX;
translateY = 'translateY(' + mouseY + 'px)';
translateX = 'translateX(' + mouseX + 'px)';
});
Then with jQuery:
$(".sidebarnav").mouseover(function(){
$('.sidebarnav .cursor').css({'transform': translateY});
});
All this kind of work, but the cursor div does not perfectly align with my mouse pointer. It does if you move real slow and with precision, but it doesn't if you move a bit faster. Is there any technical reason to this lack of precision, or is my code just wrong?
Here is a jsfiddle
http://jsfiddle.net/txks3wtj/
A fiddle would definitely help. But if I understand your code correctly I believe you can't just update the .cursor's position on mouseover of the .sidebarnav - instead you need to update its position on mousemove ie all the time.
Since you don't want the cursor to move when not hovering the sidebar you'd need to keep track of whether or not it is hovered. Something like:
var isOver = false;
$('.sidebarnav').mouseover(function () {
isOver = true;
}).mouseout(function () {
isOver = false;
});
$(document).mousemove( function(e) {
mouseY = e.pageY;
mouseX = e.pageX;
translateY = 'translateY(' + mouseY + 'px)';
translateX = 'translateX(' + mouseX + 'px)';
if (isOver) {
$('.sidebarnav .cursor').css({'transform': translateY});
}
});
Untested.
Edit: It would increase performance if you cached your queries as well;
var sidebar = $('.sidebarnav');
var cursor = sidebar.find('.cursor');
Edit2: You may have better results with mouseenter and mouseleave too I think. I think over/out triggers as soon as you hover a child of the element as well.
Full code can be viewed on JSBin - http://jsbin.com/inibAya/1/edit
So I'm working on a wysiwyg website designer and I added a crosshair to show the corrinates the mouse position is within the canvas. (NOTE: a div acts as the canvas not a html5 canvas element)
The div#canvas is positioned at...
#canvas {
position: absolute;
top:0; left:44px; right:291px; bottom:16px;
overflow: auto;
}
Whatever calculation I tried to remove the 44px from the canvas's display I got NaN or undefined. When the user moves their mouse I want it to start at 0 from the top left and move onwards. Does anyone know of anyway to get this to work?
Here's my JQuery/JavaScript:
// Crosshair
var cH = $('#crosshair-h'), cV = $('#crosshair-v');
$('#canvas').mousemove(function(e) {
cH.css('top', e.pageY);
cV.css('left', e.pageX);
$('#mousepos').text( "X: " + e.pageX + "px, Y: " + e.pageY + "px");
});
From e.pageX's documentation:
Description: The mouse position relative to the left edge of the document.
You will need to account for your canvas's offset (of 44px) to solve your problem.
var canvasPosition = $(canvas).position();
$(canvas).on('mousemove', function(e) {
var x = e.pageX - canvasPosition.left;
var y = e.pageY - canvasPosition.top;
cH.css('top', e.pageY);
cV.css('left', e.pageX);
$('#mousepos').text( "X: " + x + "px, Y: " + y + "px");
});
JSBin.