Function to get position of an element relative to the top-most window

Question

This has probably been asked already, but I was not able to find any fix for what I am trying to do.

I am trying to find the magical combination of properties on the event object, along with scrolling and other offsets, to give me the position of an element relative to the top-most window that may or may not exist within an iframe . I am doing this in an attempt to fade in a small (absolutely positioned) image to the right of the element that is being moused over.

I am trying to get the position inside of a jQuery hover event. I have tried different combinations of the following properties:

$(element).position()
$(element).offset()
$(element).scrollTop()
$(element).scrollLeft();
$(document).scrollTop();
$(document).scrollLeft();
event.clientX
event.clientY
event.pageX
event.pageY

Does anyone have a function or equation that can give these numbers?

Answer 1

The easiest way in modern browsers is document.querySelector('.foo').getBoundingClientRect() which return 's and object containing the properties top and left , which are the offsets of the element relative to the viewport .

The above method works in IE >= 5 with a couple of easy hacks see http://ejohn.org/blog/getboundingclientrect-is-awesome/

Alternatively you can use the jQuery.offset() method, if you have jQuery on the page. Which will return the elements offset consistently cross browser.

Getting the offset of said element from an <iframe> can be a bit trickier depending on where your trying to get the position from ie is the script running on the same page as the element which might be in an <iframe> , or in the root page with the element in the <iframe>

If you are in the first case, you don't need to do anything as long as your element is being repositioned somewhere inside the <iframe> as you already have the correct offset.

if you are outside the <iframe> you need to take the iframe.getBoundClientRect() offsets into consideration, as the element.getBoundingClientRect() is relative to it's own viewport (the <iframe> )

Answer 2

I've managed to finagle some code that worked for this situation. Hope this helps someone in the future:

var timeoutID;
$(element).hover(function () {
    // cancel any pending fades
    window.clearTimeout(timeoutID);

    var offset = {
        left: 0,
        top: 0
    };

    if (top !== self) {
        offset = top.$('#divContainingIframes').offset();
    }

    var that = $(this);
    var elementPosition = that.position();

    var xCoord = offset.left + // distance between screen and iframe
        elementPosition.left + // distance between iframe and element
        that.width() + // width of the element
        5; // 5 pixel padding

    var yCoord = offset.top + // distance between screen and iframe
        elementPosition.top; // distance between iframe and element

    // call the show function with xCoord and yCoord
}, function () {
    // don't fade immediately, wait a half second
    timeoutID = setTimeout(function () {
        // call some hide function
    }, 500);
});