how to find coordinates of an HTML button or image, cross browser?

Question

There was a thread on this in comp.lang.javascript recently where victory was announced but no code was posted:

On an HTML page how do you find the lower left corner coordinates of an element (image or button, say) reliably across browsers and page styles? The method advocated in "Ajax in Action" (copy I have) doesn't seem to work in IE under some circumstances. To make the problem easier, let's assume we can set the global document style to be "traditional" or "transitional" or whatever.

Please provide code or a pointer to code please (a complete function that works on all browsers) -- don't just say "that's easy" and blather about what traversing the DOM -- if I want to read that kind of thing I'll go back to comp.lang.javascript. Please scold me if this is a repeat and point me to the solution -- I did try to find it.

Answer 1

Try this:

var elm = document.getElementById('foo');
var point = {x:0,y:elm.offsetHeight}; // Change to y:0 to get the top-left

while (elm)
{
    // This will get you the position relative to the absolute container,
    // which is what you need for positioning an element within it
    if (elm.style.position == 'absolute')
        break;

    point.x += elm.offsetLeft;
    point.y += elm.offsetTop;

    elm = elm.offsetParent;
}

Answer 2

In jQuery:

var jq = $('#yourElement');
var position = jq.offset();
alert('x: ' + position.left + ', y: ' + position.top);

var bottomLeftPixelPosition =
    { left: position.left, top: position.top + jq.height() - 1; };

Answer 3

In my experience, the only sure-fire way to get stuff like this to work is using JQuery (don't be afraid, it's just an external script file you have to include). Then you can use a statement like

$('#element').position()

or

$('#element').offset()

to get the current coordinates, which works excellently across any and all browsers I've encountered so far.

Answer 4

I have been using this, works for both IE and Firefox.

var Target = document.getElementById('SomeID');
var Pos = findPos(Target);

AnotherObj = document.getElementById('AnotherID');
AnotherObj .style.top  = Pos[1] + "px";
AnotherObj .style.left = Pos[0] + "px";

//------------------------------------
function findPos(obj) {
//----------------------------------------
    var curleft = curtop = 0;
    if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return [curleft,curtop];
    }
}