jQuery best way to detect a parent elements edge [closed]

Question

I have dev'd up a little popover element inside a frame with the intention for this frame to sit within a facebook application. This means that the app is limited to 810px and there can be no bleed. In my application you can hover an element and that element will create a small popover with a slightly larger element and a call to action within it.

This however will not work as the bleed will cut the images off. So i'm toying with the idea of either detecting parent edges and offsetting or centering the popover in the apps window. Which do you think would be:

a) the best option b) the quickest option c) why

Really appreciate some opinions on this.

Answer 1

$(elem).position()

detects position of the top-left corner element. To get the bottom-right corner you can use

$(elem).width()
$(elem).height()

return size of the element so you can calculate the bottom and right position.

I'd create a ui function which will return all 4 values at once

function get_position(e) {
    var res = new Object();
    var pos = e.position();
    res.left = pos.left;
    res.top = post.top;
    res.right = res.left + e.width();
    res.bottom = res.top + e.height();
    return res;
}

and call it for the parent element get_position($('#id').parent())

Please note that the values may be unexpected if you use margin, padding and border. In this case you can outerWidth() jquery function.