Absolute position of an element on the screen using jQuery

Question

How do I find out the absolute position of an element on the current visible screen (viewport) using jQuery?

I am having position:relative, so offset() will only give the offset within the parent.

I have hierarchical divs, so $("#me").parent().offset() + $("#me").offset() doesn't help either.

I need the position in the window, not the document, so when the document is scrolled, the value should change.

I know I could add up all the parent offsets, but I want a cleaner solution.

var top = $("#map").offset().top +      $("#map").parent().offset().top +      $("#map").parent().parent().offset().top +     $("#map").parent().parent().parent().offset().top; 

Any ideas?

Update: I need to get the exact gap in pixels between the top of my div and the top of the document, including padding/margins/offset?

My code:

HTML

<div id="map_frame" class="frame" hidden="hidden">     <div id="map_wrapper">         <div id="map"></div>     </div> </div> 

CSS

#map_frame{     border:1px solid #800008; }  #map_wrapper {     position:relative;     left:2%;     top:1%;     width:95%;     max-height:80%;     display:block; }  #map {     position:relative;     height:100%;     width:100%;     display:block;     border:3px solid #fff; } 

jQuery to resize the map to fill the screen*

var t = $("#map").offset().top +      $("#map").parent().offset().top +      $("#map").parent().parent().offset().top +      $("#map").parent().parent().parent().offset().top;  $("#map").height($(window).height() - t - ($(window).height() * 8 / 100)); 

Thanks...

Answer 1

See .offset() here in the jQuery doc. It gives the position relative to the document, not to the parent. You perhaps have .offset() and .position() confused. If you want the position in the window instead of the position in the document, you can subtract off the .scrollTop() and .scrollLeft() values to account for the scrolled position.

Here's an excerpt from the doc:

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

To combine these:

var offset = $("selector").offset(); var posY = offset.top - $(window).scrollTop(); var posX = offset.left - $(window).scrollLeft();  

You can try it here (scroll to see the numbers change): http://jsfiddle.net/jfriend00/hxRPQ/

Answer 2

For the absolute coordinates of any jquery element I wrote this function, it probably doesnt work for all css position types but maybe its a good start for someone ..

function AbsoluteCoordinates($element) {     var sTop = $(window).scrollTop();     var sLeft = $(window).scrollLeft();     var w = $element.width();     var h = $element.height();     var offset = $element.offset();      var $p = $element;     while(typeof $p == 'object') {         var pOffset = $p.parent().offset();         if(typeof pOffset == 'undefined') break;         offset.left = offset.left + (pOffset.left);         offset.top = offset.top + (pOffset.top);         $p = $p.parent();     }      var pos = {           left: offset.left + sLeft,           right: offset.left + w + sLeft,           top:  offset.top + sTop,           bottom: offset.top + h + sTop,     }     pos.tl = { x: pos.left, y: pos.top };     pos.tr = { x: pos.right, y: pos.top };     pos.bl = { x: pos.left, y: pos.bottom };     pos.br = { x: pos.right, y: pos.bottom };     //console.log( 'left: ' + pos.left + ' - right: ' + pos.right +' - top: ' + pos.top +' - bottom: ' + pos.bottom  );     return pos; }