Determine the left offset of a click using jQuery - javascript

Say you have an image that is 200px wide. Is there a way to determine how far from the left of the image you clicked? For example if you clicked in the dead center you would get 100. I tried using something like ui.position.left but couldn't get that to work. Any ideas?

First, get the X position of the image. Next, use the event information to get the X position of the click event.
Once you have those two, it's simple math to get the result:
$('#yourImg').click(function(e){
var imageLeft = $(this).offset().left;
var clickLeft = e.pageX;
var howFarFromLeft = clickLeft - imageLeft;
});

You need to find the mouse coordinates at the time of the click (by using the event of the click, event.pageX, event.pageY). Then find the location of the image in the body. and subtract it from the mouseposition..
The result would be the coordinates inside the image.. Demo

Related

Why my image is teleporting when I'm hovering the image by my mouse cursor inside the div

So basically I've seen a lot of advance animation websites. And I tried to create a image wherein it follows the images as I move my mouse cursor along with div coordinates.
Basically the code is like this in my codepen.
https://codepen.io/myth-vince/pen/PoQJOXj
When you try to move the cursor into the image..it will just like teleport on the top left because I think that is the constant rect height ord width of the image.
If anyone can help me with this..It will be a big thanks. I've created some advance animation like this but never met this before that just teleport suddenly.
I believe it has something with this
var rect = e.target.getBoundingClientRect();
console.log(rect)
var x = e.clientX - rect.left; //x position within the element.
var y = e.clientY - rect.top; //y position within the element.
Or maybe the SCSS but I don't know where because everything seems fine..but I think the only really problem here is because when I try to make it also center the image in the mousecursor it will just adjust itself and will not align in center of mousecursor cause it is avoiding it to teleport.
EDIT
For more information..
the part of mouseover and mousemove the mousemove will only starts when the mouse is hovering the div so it the image will start to move out.
Now for the second I need to get the e.clientX and e.clientY so that it could get the where the part of div is. And as rectX and rectY is the getting the height and width part of it
Show DIV at mouse cursor on hover of span
you can see it here the link.
and where did I get the delaying the motion of images is here
https://stackoverflow.com/questions/9136261/how-to-make-a-setinterval-stop-after-some-time-or-after-a-number-of-actions#:~:text=To%20stop%20it%20after%20running,reached%20that%20number%20clear%20it.
var rect = e.target.getBoundingClientRect();
There's your problem.
Like most other event types, the mousemove event bubbles up through the DOM.
When you put the cursor over one of those images - then e.target is not the box any more, but that particular image. So you are not working with the getBoundingClientRect data relating to your box now, but to the particular image.
As soon as you make this
var rect = box.getBoundingClientRect();
instead, the problem is gone.

How to re-position element on 'enddrag'?

I was wondering how you would be able to use the 'enddrop' event listener to change the position of an element.
I tried using this:
document.addEventListener('dragend', e => {
e.target.style.left = e.clientX;
e.target.style.top = e.clientY;
});
This works, but it's looks un-natural because the coordinates of the upper-left of the element are changed to the mouse position. So, if the user drags the element by the upper-left point it will work perfectly, but if you drag anywhere else on the element, it gives it a snappy effect because the upper-left corner will snap to the mouse's position.
Thanks!
I recently solved a similar problem:
follow the link: Prevent drop event when it's already have child element ? Drag and Drop
at the moment you start drag(dragstart) you calculate the top and left offset based on the element and mouse position
and at the end drag(dragend) event you use this offset to adapt as needed.
let offset = [0, 0] // initial state offset x, y
function dragStart(ev) {
// your code..
offsetX = ev.target.offsetLeft - ev.clientX
ev.target.offsetLeft - ev.clientX,
ev.target.offsetTop - ev.clientY
]
}
Any doubt put the code that I can help you.
Hope this helps.

Check on which part was clicked?

can you check in JS or JQuery in which part of the image was clicked?
For example we have this: Picture
Can you check if the user clicked on a specific pen? For example the red one?
Thanks
You have at least three options:
Split the image into several images each with one pen, and then put them into a link that specifies the pen (e.g. <img src="redpen.jpg" />.
You can use an HTML map with area tags.
You can use the coordinates of your click event to decide which pen was clicked like described in this answer: https://stackoverflow.com/a/4249711/387573
use of image-mapping is better for this kind of requirement. map the required area and link to required url. know more about image-mapping http://www.w3schools.com/tags/tag_map.asp
If you don't want to use an image map you can also just detect the click's x & y position relative to the image and then from there, work out what you want to do.
This will not be very accessible but it will work.
You can work out the relative x & y position of the click like so. (Try clicking on the yellow pen)
var image = document.querySelector('img');
image.addEventListener('click', onClick, true);
function onClick(event){
var imageBoundingRect = image.getBoundingClientRect();
var x = event.pageX - imageBoundingRect.left;
// We are not using the y co-ordinate but this is how you would get it.
var y = event.pageY - imageBoundingRect.top;
if (x >= 345 && x <= 380){
alert('Clicked on the yellow pen.')
}
}
<img src="http://www.wilde13-werbemittelkatalog.de/pictures/werbekugelschreiber.jpg"/>

finding top and left values of DIV without setting stylesheet values

I'm making a drawing application which involves clicking in a div box and reading co-ordinate values. The problem with it so far is that the coordinate values aren't correct relative to the box.
Here's my setup.. the drawing application starts off by loading simple HTML and then a DIV exclusively for drawing. Then I use a click handler to detect a click and return co-ordinates.
The width and height return fine because I defined them for the DIV, but the top and left positions return NaN in javascript.
I know I can easily do this with using css property position="absolute" for the DIV and specifying left and top that way, but that would wreck the rest of the HTML document because then the whole thing would look out of place.
Is there a way I can get a top and left value of DIV without explicitly specifying the two values for the DIV?
I want to achieve this with simple javascript. No jquery.
jsBin demo
function getXY( ev ){
var gbc = this.getBoundingClientRect(),
X = ev.clientX - gbc.left,
Y = ev.clientY - gbc.top;
alert( X +' '+ Y);
}
document.getElementById('board').onclick = getXY;
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/event.clientX
https://developer.mozilla.org/en-US/docs/Web/API/event.clientY

Mouse position and offset

I get mouse coordinates on some web page and save them.
$("div#container").mousemove( function(e) {
client_x = e.pageX;
client_y = e.pageY;
// save x,y
});
Now other person load that same page and i want to show them the same coordinates (x,x position).
How can I get the same point if I have to take in consideration that the div#container is not at same position as it was in my browser (considering screen resolution and scroll)?
I would use $.offset().top and $.offset().left of the parent div container, and calculate the difference from that to the current X and Y coordinates of the mouse cursor.
.offset() always refers to the document and not to the parent of the element.
For example:
$('#element').mousemove(function(e){
var client_x = e.pageX;
var client_y = e.pageY;
var elementOffset = $(this).offset();
client_x -= elementOffset.left;
client_y -= elementOffset.top;
// save x, y.
});
Then, on the other users display, show the coordinates after adding them to his offsets.
This doesn't seem possible because of the variables you mentioned in the question. Screen resolution is the main reason, but, also, it depends on how big their window is. At first, you might think that you could compute the mouse's position relative to fixed points, like divs shown (take Stack Overflow, for example, where the main container of the site doesn't resize with the browser window). But if their window is smaller than the container, you would be making some false assumptions about what they see.
That being said, you can always just compute the mouse position relative to fixed elements you know will be on the screenusing $.offset() and just assume they have their screen showing everything (or check $(window) size) and are using "normal" viewing conditions.
You can use the values returned by offset(), in your example:
$("div#container").offset().left
and
$("div#container").offset().top
to substract them to e.pageXand e.pageY.
offset() function gives you the matched element's position relative to the document (see the docs), so there's no problem if the users scroll down.
Example: http://jsfiddle.net/3jMRS/

Categories

Resources