1

Please note that neither the jQuery position function and Javascript's getBoundingClientRect do what I'm asking for.

I am trying to get the element's position relative to the top-left coordinates of the user's screen.

I am mainly looking to figure this out for Google chrome. I would appreciate any answer that can lead me down the right path.

Michael Gaskill
  • 7,913
  • 10
  • 38
  • 43
Philoxopher
  • 1,660
  • 3
  • 15
  • 17

2 Answers2

4

Using the jQuery .offset() function, you can get the coordinates of the top-left of the browser page:

var offset = $("selector").offset();

Combining that with the Javascript window.screenX and window.screenY window properties, you can calculate the position of the element as an offset from the top/left of the screen:

var screenY = offset.top + window.screenX;
var screenX = offset.left + window.screenY;

Note that window.screenX and window.screenY are standard in most browsers, but IE versions 8 and prior use window.screenTop and window.screenLeft, instead. If you need compatibility with IE8 or earlier, make sure to take that into account.

Also note that you might need to account for the current scroll position, in which case, you would use the jQuery .scrollTop() and .scrollLeft() methods and subtract from the offset value.

Unfortunately, this will not take window borders or toolbars into account. To do that, you can capture a mouse move and store the mouse position, which is given in actual screen coordinates.

The core of this solution is the following, which installs a one-time-use mouse handler to determine the actual screen coordinates of the page:

var pageX;
var pageY;

window.onmousemove = setMouseCoordinates;

function setMouseCoordinates (e) {
    window.onmousemove = null;

    pageX = e.screenX - e.clientX;
    pageY = e.screenY - e.clientY;
}

Then, you can use those stored values to calculate the offset of any Javascript element:

x = pageX + elem.offsetLeft;
y = pageY + elem.offsetTop;

or jQuery element:

x = pageX + elem.position().left;
y = pageY + elem.position().top;

Check out the fiddle to see it in action: https://jsfiddle.net/mgaskill/bpqzct3f/

Michael Gaskill
  • 7,913
  • 10
  • 38
  • 43
  • Would this take into account the browsers address bar and bookmarks bar? I'm going to give it a shot right now. Also is it possible to get the offset without using jQuerys offset function and a native JS call? – Philoxopher Jun 04 '16 at 05:46
  • @KerxPhilo I believe that all of the modern browsers take into account the address bar, bookmarks bar, and any custom toolbars installed. It should give you the pixel-correct location. Regarding the native Javascript call, it's not so simple - the answer to [finding element's position relative to the document](http://stackoverflow.com/a/5598797/6263819) shows what needs to be done. I'd stick with jQuery on this one, but that's just me. :D – Michael Gaskill Jun 04 '16 at 05:52
  • Michael, unfortunately this didn't work. It appears that window.screenX provides information of the position where the browser window is on the screen and offset.top provides the position from the body. It doesn't account for the browser's address bar, space that the google chrome tabs take up, etc... – Philoxopher Jun 04 '16 at 07:11
  • @KerxPhilo I do apologize, my memory was incorrect on the browser borders. I have updated my answer with a working example that will get the screen coordinates, as well as a jsFiddle that shows it working. Other than this, there's no way to get true screen coordinates of an element. I do hope that this helps you. – Michael Gaskill Jun 04 '16 at 21:08
0

I think HTMLElement.offSetLeft and HTMLElement.offSetTop is what you're looking for.

Ciprianis
  • 255
  • 3
  • 10
  • No it's not. That's from the parent node. – Philoxopher Jun 04 '16 at 05:26
  • The other options would be [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) and [scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft). – Ciprianis Jun 04 '16 at 05:30