How to calculate mouse coordinates related to DIV position - javascript

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);
});

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');

Get mouse position relative to a zoomed out 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

Unable to draw in canvas after moving its position in the page [duplicate]

I am trying to use getBoundingClientRect to get the coordinates of my click on canvas, but am always getting the same result.
My code is here: http://fiddle.jshell.net/nH74F/1/
As you can see i always get 8,8
No idea why, is there another way to get this info?
That's because you always use the absolute position of the element returned by getBoundingClientRect, and not the mouse position.
Try this instead:
canvas.addEventListener('click', function(e) { // use event argument
var rect = canvas.getBoundingClientRect(); // get element's abs. position
var x = e.clientX - rect.left; // get mouse x and adjust for el.
var y = e.clientY - rect.top; // get mouse y and adjust for el.
alert('Mouse position: ' + x + ',' + y);
...
Modified fiddle

How can I get the coordinates of a clicked mouse (I need math calculation only)

I have a box with a width of 800 and height of 600.
Then my screen size (container) is 1000 and its height is 700.
then, if we say:
x = container
y = rectangle
z = point in space
The engine only outputs the z based on its coordinate in x, therefore I need to calculate the coordinate of z in y.
I have:
z
size of x
size of y
coordinate of z in x
and what I want?
coordinate of z in y
Click for Demo
Jquery
$("#id").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
Html
<div id="id">
//or $(this).offset(); if you really just want the current element's offset
</div>
Demo Link
It gives co-ordinates only for related container
Here is Script
$(document).ready(function(){
$("#container").click(function(e){
alert(e.pageX - $("#container").parent().offset().left);
alert( e.pageY - $("#container").parent().offset().top);
});
});

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.

Categories

Resources