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.
See: http://docs.jquery.com/Plugins/dimensions "Deprecated: As of jQuery 1.2.6, the dimensions plugin has been merged into core. You can view the full documentation in the CSS category. "plus, this is only relative positions
2009-06-16 17:54:40
if you run that code on that page of the project you can verify that is not relative but they are absolute values.
balexandre
2009-06-16 17:57:26
Looks like they've resolved the issues in a newer release of jQuery. Using 1.3.2 seems to give the document x,y coordinates like I was hoping. And I tested this in IE7, FF3 and Safari3 and they all seem to be behaving correctly
2009-06-16 18:12:28
Just came across another abnormality. It doesn't account for margins of the element you're selecting. So to get the visual x,y of the viewable element...I'm going to need to add those on.
2009-06-16 18:45:25
it does... in my example (1st image) if you add in the first line this: $("#wrapper2").css("marginLeft","20px"); and then execute the x and y variables, you will end up with: x: 73 y: 177
balexandre
2009-06-16 18:58:37
+1
A:
The offset function will do that for you.
Here is the example they give:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
Jeff Davis
2009-06-16 18:05:14
A:
My solution is a plugin with "workarounds" :+D . But Works!
jQuery.fn.getPos = function(){
var o = this[0];
var left = 0, top = 0, parentNode = null, offsetParent = null;
offsetParent = o.offsetParent;
var original = o;
var el = o;
while (el.parentNode != null) {
el = el.parentNode;
if (el.offsetParent != null) {
var considerScroll = true;
if (window.opera) {
if (el == original.parentNode || el.nodeName == "TR") {
considerScroll = false;
}
}
if (considerScroll) {
if (el.scrollTop && el.scrollTop > 0) {
top -= el.scrollTop;
}
if (el.scrollLeft && el.scrollLeft > 0) {
left -= el.scrollLeft;
}
}
}
if (el == offsetParent) {
left += o.offsetLeft;
if (el.clientLeft && el.nodeName != "TABLE") {
left += el.clientLeft;
}
top += o.offsetTop;
if (el.clientTop && el.nodeName != "TABLE") {
top += el.clientTop;
}
o = el;
if (o.offsetParent == null) {
if (o.offsetLeft) {
left += o.offsetLeft;
}
if (o.offsetTop) {
top += o.offsetTop;
}
}
offsetParent = o.offsetParent;
}
}
return {
left: left,
top: top
};
};
Usage:
var p = $("#wrapper2").getPos();
alert("top:"+p.top+"; left:"+p.left);
EderBaum
2010-01-25 05:35:48
you know that there are frameworks just so we don't need to re-write code, right?
balexandre
2010-04-20 11:57:16