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.
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>
What I'm looking to accomplish is to get the position of the mouse in relation to a zoomed out div with matrix transform. As you will see in the fiddle below I have a red div with a width of 4000px, but since it's zoomed out it appears smaller then said 4000px. What should happen is if you click on the intersecting lines in the red div, relX should read (around) 2000 and relY should read around 325.
$(".crazyWide").click(function(e){
var clickPos = $(this).offset();
var relX = e.pageX - clickPos.left;
var relY = e.pageY - clickPos.top;
//Used to display current click coords
$(".debug").empty();
$(".debug").prepend("relX: " + relX + " relY: " + relY);
});
Fiddle
The element is shrunk to a factor of 0.12 in both directions. As such, you can calculate the relative mouse click position by dividing the relX and relY by 0.12:
$(".debug").prepend("relX: " + (relX / 0.12) + " relY: " + (relY / 0.12));
Updated fiddle
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.
I'm trying to create a jQuery script that changes background-position x px to the left or right according to mouse movements (starting from background-position:center).
Here's what I have so far: http://jsfiddle.net/multiformeingegno/KunZ4/530/
$("#salone").bind('mousemove', function (e) {
$(this).css({
backgroundPosition: e.pageX + 'px ' + e.pageY + 'px'
});
});
Problem is it doesn't start from background-position:center and when I move the mouse the background-image starts from mouse position and reveals the white background.
I'd like it to move from the center to the left/right according to mouse movements. And also adjust the speed of the background-position change (animate?).
Just subtract the position you want to start from:
backgroundPosition: (e.pageX-650) + 'px ' + (e.pageY-410) + 'px'
to change the speed adjust the factor for the mouse position:
backgroundPosition: (e.pageX*2-650) + 'px ' + (e.pageY*2-410) + 'px'
Is double as fast.
http://jsfiddle.net/KunZ4/538/
For the calculation of the background center you could just take the image path, append it to an invisible image and get the width and height.
var url = $('#myDiv').css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
var bgImg = $('<img />');
bgImg.hide();
scope = this;
bgImg.bind('load', function()
{
scope.height = $(this).height();
scope.width = $(this).width();
});
$('#myDiv').append(bgImg);
bgImg.attr('src', url);
var centerX = scope.width/2;
var centerY = scope.height/2;
No you can use centerX and centerY to center your image.
Took the center calculation from here:
How do I get background image size in jQuery?
I am trying to get the location of the mouse while hovering over an image in pixels from the top left corner of the image. I am currently using the pageX and pageY event attributes but this is returning a value greater than the width and height of the image itself.
var getImgCoord = function(e) {
var x = e.pageX,
y = e.pageY;
console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(function() {
getImgCoord(event);
});
Any help would be greatly appreciated.
pageX and pageY are the coordinates relative to the top left corner of the document not your image itself (the name already says it).
you need to subtract the offsets from your element:
$('.featuredImg').mousemove(function(e) {
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
console.log(x + ' | ' + y);
});
http://jsfiddle.net/D5uuA/
var getImgCoord = function(e) {
var imageOffset = $(this).offset();
//or $(this).offset(); if you really just want the current element's offset
var x = e.pageX - imageOffset.left,
y = e.pageY - imageOffset.top;
console.log(x + ' | ' + y);
}
$('.featuredImg').mousemove(getImgCoord);