3

how can i get the absolute screen coordinates of the html/body? I found all those window.screenTop, screenLeft, outerheight/innerHeight - but thats not the solution.

EDIT: I updated the image to clarify what I need!

enter image description here

Pablo Lozano
  • 10,122
  • 2
  • 38
  • 59
debay
  • 41
  • 3
  • You can use JQuery `scrollLeft` and `scrollTop`functions. – Hardy Jul 09 '14 at 10:11
  • Possible duplicate of http://stackoverflow.com/questions/3714628/jquery-get-the-location-of-an-element-relative-to-window – user1094553 Jul 09 '14 at 10:13
  • Thanks so far, but unfortunately that doesnt help. I made a new image to make more clear what i need! – debay Jul 09 '14 at 11:12
  • The DOM works in the context of the browser. I'm pretty sure you can't get the screen offset in the desktop from JavaScript. Please correct me if I'm wrong on that! – Alex Jul 09 '14 at 11:58
  • That is my impression as well, I think I would have found it if it was possible - but better ask of course – debay Jul 09 '14 at 12:07

3 Answers3

5

You can do this (taking some assumptions):

//this is the border width of the OS window.
var border= (window.outerWidth-window.innerWidth)/2; 

//Assuming the window border is homogeneous and there is nothing in
// the bottom of the window (firebug or something like that)
var menuHeight=(window.outerHeight-window.innerHeight)-border*2;

var absX=window.screenX + border;
var absY=window.screenY+border+menuHeight;
Pablo Lozano
  • 10,122
  • 2
  • 38
  • 59
  • Nifty! A workaround i can live with! ;) Thanks, much appreciated! – debay Jul 09 '14 at 12:37
  • Great Answer! Note to readers: the `outer` values may be in real pixels, while the `inner` ones may be in "CCS pixel". – manuell Mar 25 '16 at 16:44
0

Try:

window.screenX

and

window.screenY

Note that screenY does not take into account address bar bookmarks bar etc at the top of the browser

Edit:

You may be able to use (window.outerHeight - window.innerHeight) to get the additional offset:

window.screenY + window.outerHeight - window.innerHeight

But this assumes you do not have any toolbars at the bottom of the browser (will break if you have docked devtools open)

rob
  • 1,286
  • 11
  • 12
0

Just get body element:

var $body = $(this.ie6 ? document.body : document);

And use this properties: $body.width(), $body.height()

Also to get the window dimensions

var $window = $(window);
var wWidth  = $window.width();
var wHeight = $window.height();

UPDATED Try to use this: Element.getBoundingClientRect()

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Vasyl Senko
  • 1,779
  • 20
  • 33