jQuery x y document coordinates of DOM object

Question

I need to get the X,Y coordinates (relative to the document's top/left) for a DOM element. I can't locate any plugins or jQuery property or method that can give these to me. I can get the top and left of the DOM element, but that can be either relative to its current container/parent or to document.

Answer 1

you can use Dimensions plugin [Deprecated... included in jQuery 1.3.2+]

offset()
Get the current offset of the first matched element, in pixels, relative to the document.

position()
Gets the top and left position of an element relative to its offset parent.

knowing this, then it's easy... (using my little svg project as an example page)

var x = $("#wrapper2").offset().left;
var y = $("#wrapper2").offset().top;

console.log('x: ' + x + ' y: ' + y);

output:

x: 53 y: 177

hope it helps what you're looking for.

here's an image of offset() and position()

using XRay

using Web Developer toolbar