Get mouse position relative to a zoomed out div - javascript

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

Related

Accurate jQuery x y mouse click on image

I have a div with a background image - the div is set to the exact size of the image and my pointer is set to a crosshair over the div.
I want to mark each click with its x and y positions in the div over the image background. This I can do but the mark on the div is always lower and to the left of the actual cursor why is this?
function showClick(x,y)
{
$('.clickable').append('<span id="'+x+y+'_span" style="position: absolute;top:'+y+'px;left:'+x+'px;" class="red">+</span>');
}
$('.clickable').bind('click', function (ev) {
var $div = $(ev.target);
var offset = $div.offset();
var xMargin = ($div.outerWidth() - $div.width()) / 2;
var yMargin = ($div.outerHeight() - $div.height()) / 2;
var x = (ev.pageX + xMargin) - offset.left;
var y = (ev.pageY + yMargin) - offset.top;
showClick(x,y);
});
working example: https://jsfiddle.net/b94ypmae/3/
You are not taking into account the size of the span (and the character inside it).
Your code is working properly, in that a span is being placed in your div at the position of your cursor, but that position is based on the upper left corner
If you put a border around your span you can see it is a perfect alignment of your upper left corner: JSFiddle showing border
You could fix this by taking into account the size of the placed span(if you know it will always be the same you could hard code it as well). Here's an example of getting the size of the placed span and moving it by half it's width and height: Fixed JSFiddle
var placedSpan = $("#" + x + y + "_span");
var width = placedSpan.width();
var height = placedSpan.height();
placedSpan.css('left', x - width / 2 + 'px');
placedSpan.css('top', y - height / 2 + 'px');

Move background-position x px to left/right according to mouse movements (starting from background-position:center)

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?

Why is dragging with css translate jumping?

I am trying to drag a container using transform translate but something is causing a jumpy behavior and I can't figure out what is the cause.
UPDATE: This must work on elements when their container is not always positioned at 0,0 from the document.
http://jsfiddle.net/dML5t/2/
HTML:
<div id=container style="position:absolute;left:50px;top:50px;width:500px;height:500px;background-color:red;">
<div id=tcontainer style="position:relative;left:50px;top:50px;width:400px;height:400px;background-color:green;">
<div id=move style="position:relative;left:20px;top:20px;height:150px;width:150px;background-color:lightgray;">
</div>
</div>
Javascript:
obj = {startPositionX:0,startPositionY:0};
$('#move').on("mousedown",function(){
var move = $(this);
obj.startPositionX=event.offsetX+$('#tcontainer').offset().left;
obj.startPositionY=event.offsetY+$('#tcontainer').offset().top;
$(document).on("mousemove",function(e){
console.log("dragging", e.pageX-obj.startPositionX, e.pageY-obj.startPositionY);
move.css('transform','translate('+(e.pageX-obj.startPositionX)+'px, '+(e.pageY-obj.startPositionY)+'px)');
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
OffsetX and OffsetY may give you cursor pos relative to an element which is hovered now. You saved initial coordinates in mousedown. When mousemove was triggered your this coordinates changed a little, so when you subtract one from initials you got zeros (or 1px of difference) and your div went to top left corner. After it happaned your cursor hovered body element and in mousemove you get coordinates related to body. So when you subtract your zeros from the new coordinates you get real coordinates and your div go to the right place. Then you will get coordinates related to dragging div and will get zeros again, then real coords and so on.
Use pageX and pageY instead! fiddle
$('.move').on("mousedown",function(me){
var move = $(this);
var lastOffset = move.data('lastTransform');
var lastOffsetX = lastOffset ? lastOffset.dx : 0,
lastOffsetY = lastOffset ? lastOffset.dy : 0;
var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;
$(document).on("mousemove",function(e){
var newDx = e.pageX - startX,
newDy = e.pageY - startY;
console.log("dragging", e.pageX-startX, e.pageY-startY);
move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');
// we need to save last made offset
move.data('lastTransform', {dx: newDx, dy: newDy });
});
});
$(document).on("mouseup",function(){
$(this).off("mousemove");
});
You need save original coords of your div (move.offset()) and use mouse offset (e.pageX-startX, e.pageY-startY) to get new coords.

Subtract Display Pixels from Mouse Position

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.

How to calculate mouse coordinates related to DIV position

I have a DIV and I can get the offset using .offset().
But I am trying to get the position of the mouse related to the div. When I hover the DIV i can get the x and y offsets of Mouse. But those will be calculated related to Document. But it should be calculated in below way.
For example DIV dimensions are 200 and 200.
then it should calculate offsets related to (0,200)(200,0),(200,200),(200,200).
Please help me on this. How I can do this.
Do you mean:
$('#someele').click(function(e) {
var offset = $(this).offset();
var x = Math.floor(e.pageX - offset.left);
var y = Math.floor(e.pageY - offset.top);
console.log('x pos:' + x + ' y pos:' + y);
});

Categories

Resources