Get screen coordinates of DOM element

Question

Can I somehow get precise screen coordinates (relative to top left corner of the screen) of a DOM object. Through NPAPI\\FireBreath or JavaScript. (Need this for plugin, tha

Answer 1

I know you didn't mention jQuery, but you can use http://api.jquery.com/offset/ as an example. It combines the offsetLeft/top of all the parents and accounts for scrolling, giving you an accurate x,y (in relation to the body) for nested nodes.

Note that if you're handling events, the event object always tells you where the event happened using http://api.jquery.com/event.pageX/ and http://api.jquery.com/event.pageY/

Again, mentioning jQuery is for inspiration only if you don't want to use it.

Here's how jQuery does it

$.fn.offset = function (options) {
    var elem = this[0],
        doc = elem && elem.ownerDocument;

    if (!doc) {
        return null;
    }

    if (elem === doc.body) {
        return jQuery.offset.bodyOffset(elem);
    }

    return getOffset(elem, doc, doc.documentElement);
}

function getOffset(elem, doc, docElem, box) {
    try {
        box = elem.getBoundingClientRect();
    } catch(e) {}

    // Make sure we're not dealing with a disconnected DOM node
    if (!box || !jQuery.contains(docElem, elem)) {
        return box ? {
            top: box.top,
            left: box.left
        } : {
            top: 0,
            left: 0
        };
    }

    var body = doc.body,
        win = getWindow(doc),
        clientTop = docElem.clientTop || body.clientTop || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop,
        scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
        top = box.top + scrollTop - clientTop,
        left = box.left + scrollLeft - clientLeft;

    return {
        top: top,
        left: left
    };
}