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

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