We Keep Coding

Finding the position of an element from another

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

jQuery drawing method using coordinates

I am a beginner in Javascript/jQuery. I have a set of coordinates belonging to an area element and I am wondering if the following is possible: when I mouse over the area element, does jQuery have a method that would draw the rectangle defined by those coordinates? Or is there some library/plugin you know of that could do this?
I know I can't use the jQuery .show() method on an area element, but that is the effect I am looking for.

One way is to use the jQuery offset method to translate the event.pageX and event.pageY coordinates from the event into a mouse position relative to the parent. Here's an example:
$("body").hover(function(e){
var offset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
//You have your rectangle and the mouse position, Now you can check if mouse is in the area or not
//Do something...
});

Retreiving coordinates of a click inside a div for modern browsers?

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

How to log a click at an xy coordinate that remains reliable regardless of page design

I'm creating a website heat map. I know how to get the xy coordinate of a click, but on pages in centered divs the xy coordinate of the click varies based on the user's browser window width.
How do I log a consistent xy so that I can display the location of the click later regardless of the window size?
I can use jQuery's offset() to get the xy based on some centered parent element. But I'm placing this heat map on multiple sites. So given that each site's markup is unique, how do I determine what top level "wrapper" element should be used to calculate the offset?
Is there some simpler method I'm overlooking?

How about saving not only the x/y coordinates of the click but also the width/height of the view-port. That way you can get the position of the click relative to the view-port and calculate where on the content the click actually occured:
$(document).on('click', function (event) {
var x = event.pageX,
y = event.pageY,
w = $(window).width(),
h = $(window).height();
});
You could optimize this by only getting the view-port dimension when they change:
var windowWidth = 0,
windowHeight = 0;
$(window).on('resize', function () {
windowWidth = $(this).width();
windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load
$(document).on('click', function (event) {
var x = event.pageX,
y = event.pageY,
w = windowWidth,
h = windowHeight;
});
Update
For pages that are centered you could get the coordinate from the center of the view-port:
var windowWidth = 0,
windowHeight = 0;
$(window).on('resize', function () {
windowWidth = $(this).width();
windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load
$(document).on('click', function (event) {
var x = (event.pageX - (windowWidth / 2)),
y = event.pageY;
});
This will result in positive x dimensions for anything on the right side of the page and negative x dimensions for anything on the left side of the page.
Here is a demo: http://jsfiddle.net/aWBFM/

Have you tried using the <body> element? I know in HTML5 it isn't necessary, but I haven't ever come across an instance where it isn't used (and there is clicking involved).

Well according to the offset() documentation it retrieves the coordinates relative to the document, which is what you want. What you need to do is get the window height and width. Then using a bit of maths, calculate the distance between the window and the map.
$(window).width() and
$(window).height() will get you what you need.

You should be able to get the position of the mouse relative to the top left corner of the page by looking at event.clientX and event.clientY.
If you want the position of the mouse relative to a particular object, you can look at the offsetTop and offsetLeft properties of that object. (event.clientX - obj.offsetLeft) would be the position of the mouse relative to the object.

Is there a way to grab the x and y position of an element on a page without it being absolute using jquery?

Is there a way to grab the x and y position of an element if it's not positioned absolute using jquery?

The offset() method should do this.
It returns an object which has left and top attributes.
var offset = $('foo').offset();
var offsetLeft = offset.left;
var offsetTop = offset.top;