I would like to click on an element (without id) thanks to the coordinates of another (found with his id).
I am thinking of something like
.click(apple + offsetX)
.click(orange + offsetX)
I hope it's clear I am new to Javascript and testing.
Your question is not soclear but I think you want something just like this.
for apple element. calculate x position and y position of apple element and run this code;
var x = /*calculate x position of apple*/;
var y = /*calculate y position of apple*/;
document.elementFromPoint(x,y).click();
there is an example for you
https://codepen.io/lumosmind/pen/PoPGwZZ
Related
In JavaScript/jQuery, if we wanted to rotate an element around an origin point defined by the click point, you could do this:
var angle = 0;
$('#myElement').on('click', function(event) {
const ELEMENT_X = event.pageX - $(this).offset().left;
const ELEMENT_Y = event.pageY - $(this).offset().top;
angle +=10;
$(this).css('transform-origin', ELEMENT_X + 'px ' + ELEMENT_Y + 'px');
$(this).css('transform', 'rotate(' + angle + 'deg)');
});
So it works as planned on the first click because the element is not in a rotated state. After the first rotation, the ELEMENT_X AND ELEMENT_Y are not set correctly obviously, which causes the origin point to be incorrect. Is there a formula we can apply that would find the correct x and y values to set on a click point for the CSS transform-orign property based on the current angle of the element?
I'm not too sure if this article is the same as mine: How we can calculate the correct x and y value for the rotated image?
This thing is driving me nuts. I made a JSFiddle:
https://jsfiddle.net/f251qL98/
The goal here is to make the element rotate around any point within the element that we click on. By default, the origin point is set at the center of the element. The first click works fine, but subsequent ones, the element rotates around the incorrect origin point.
But if we click on another part of the element, I'm not too sure where the origin would be located, especially if the object has been rotated. I'm sure it is some math triangle manipulation solution, but that is not my strong side. Anyhow, back to testing all try to test more possibilities.
This question already has answers here:
Find mouse position relative to element
(29 answers)
Closed 4 years ago.
here's my latest problem.
I'm trying to get the X and Y coordinates of where a user clicks inside an image. Regardless of where it's positioned in the user's window, the zoom, the scroll position, the size of window, what the user had for breakfast, etc., the X,Y coordinates have to take into account only what position the user clicks in the image but not include the position of the image in the screen, i.e. the upper left point in the image is 0,0. (Hope I'm explaining this clearly.)
The reason I say this is because, in my current JavaScript function, I'm getting the X,Y coordinates of something, but I'm not sure exactly what. I think it's the position of where the user clicks in the overall window, but not in the image. This means that the X,Y coordinates change if the position of the image is different, if the user has scrolled, if I move the image somewhere else in the page, etc. Here's my current HTML code:
<img id="hotspot_image" name="hotspot_image" style="width: 50%" src="misc/pages/hotspotimage.jpg" alt="Hotspot image" onclick="clickHotspotImage(event);"/>
And here's my Javascript function:
function clickHotspotImage(event) {
var xOffset = document.getElementById('hotspot_image').offsetLeft;
var xCoordinate = event.clientX;
var yOffset = document.getElementById('hotspot_image').offsetTop;
var yCoordinate = event.clientY;
var hotspotlist = document.getElementById('hotspot_list').value;
document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;
}
The last few lines of code in there take that X,Y coordinate pair and add it to the end of a list contained in a <textarea> tag called hotspot_list. Does anyone know if I'm on the right track or can point me in the right direction, or knows what missing piece I need to get that true X,Y coordinate? Thanks!
You should use offsetX and offsetY from you event object to get the mouse coordinates relative to the element that fires the event. clientX and clientY will return mouse coordinates relative to the window, as you have noted.
Event object properties
This should do the trick
function clickHotspotImage(event) {
var xCoordinate = event.offsetX;
var yCoordinate = event.offsetY;
var hotspotlist = document.getElementById('hotspot_list').value;
document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;
}
I am trying to get the coordinates of a div with JQuery. I am currently using this method:
$("#draw_area").click(function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
However, I realised that if I have html elements on top of the div "draw_area", it will give me different "y". I do not want that. What I want is to get the exact/relative coordinates of that particular div, and the coordinates are always the same regardless whether there are other elements
EDIT:
above the div or next to the div.
Can someone please tell me how I could achieve this? Any help will be appreciated. Thanks!
I think you're looking for .offset(), which gives you the position relative to the document, as opposed to .position(), which gives you the position relative to the offset parent.
$("#draw_area").click(function (e) {
var o = $(this).offset();
var x = o.left;
var y = o.top;
});
I have a disturbing issue with kinetic js using dragBoundFunc.
I have dragBoundFunc defined on selector group, and it works perfectly not allowing the group overflow on the green rectangle. The erroneous case is follows:
1 - drag an anchor to resize selector rectangle, try to drag the anchor outside green rectangle. It will seem not moving outside bounds.
2 - now move selector rectangle to the edges in order to check bounds. You'll see that as if the green rectangle's position is somehow shifted from its original position.
How can I solve this strange behaviour? Any ideas?
Here is the fiddle.
Because rect and anchors is placed relative to group, you shoud move them after drag. I think best way to keep left top anchor and rectangle coord as {0, 0} in group.
group.on("dragend",function(){
var rect = group.get('#rectangle')[0];
var pos = rect.getPosition();
var dx = pos.x;
var dy = pos.y;
group.children.each(function(child){
child.move(-dx, -dy);
});
group.setPosition({
x : pos.x + group.getPosition().x,
y : pos.y + group.getPosition().y
});
layer.draw();
});
http://jsfiddle.net/lavrton/TfgAV/1/
For modern browsers (IE 10+, FF, Safari, Chrome): It looks like you would have to use the facade pattern to build a consistent interface and do a lot of fiddling using this info.
I'm looking for a simple modern way to determine the x, y coordinates of where a user clicked in a div and use those coordinates to position a pie menu as determined in this SO Question.
No libraries unless used to show concept.
Reference
What is the difference between screenX/Y, clientX/Y and pageX/Y?
Here is a google hit that shows 3 different event properties
You could try
element.onclick = function(e) {
var x = e.pageX - element.offsetLeft // the absolute x position
// minus the element's absolute x position
var y = e.pageY - element.offsetTop
alert('x : ' + x + ', y : ' + y)
}
Here is a fiddle
the following will give you the coordinates for any div clicked in the page; for a specific div replace 'div' with '#yourDivId'
$(document).ready(function(){
$('div').click(function(e){
var x = e.pageX;
var y = e.pageY;
alert(...);
});
});