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 bination 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 binations 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?

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 bination 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 binations 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?

• javascript
• jquery
• iframe
• position

• Are you looking for the position of the mouse, or the position of the top left corner of the element in which the mouse is hovering? – jackwanders Commented Aug 14, 2012 at 15:09
• @jackwanders position of the element – jbabey Commented Aug 14, 2012 at 15:11
• can you show us the HTML you're working with? – jackwanders Commented Aug 14, 2012 at 15:12
• @jackwanders not really, it's an enterprise intranet website (aka a huge mess). for the purposes of this question, imagine a span inside of a scrolling div inside of an iframe. – jbabey Commented Aug 14, 2012 at 15:13
• and you want the position of the span relative to what? the div or the iframe? – jackwanders Commented Aug 14, 2012 at 15:15

2 Answers 2

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/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 i.e. 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>)

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);
});