Question

I need to determine the exact on-screen coordinates (relative to document) of an HTML element.

I already have code that does this (summing clientWidth and clientHeight of each parent object up to the root), but seemed to be ineffective when jQuery’s scroll effect comes into work.

The elements I need to detect the position of, in fact, are part of a div with overflow="hidden" that is used for jQuery scrolling effect.

When I try to get the element’s position with the current code, I get a width value that is relative to the length of the scrollable panel. When I scroll the panel, the position remains the same (so, the tooltip I ultimately need to position is placed too right, in the exact position the anchor control is when hidden behind the container panel’s overflow.

My question is

How to adapt the current code to this requirement?

function findPos(obj) {

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

Answer 1

Use jQuery’s .offset() function.