Cooking with JavaScript & DHTML, Part 6

Related Reading JavaScript & DHTML Cookbook Solutions and Example for Web Programmers By Danny Goodman

Editor's note: In this sixth and final sample recipe excerpted from JavaScript & DHTML Cookbook, Danny Goodman shows you how to determine the location of a nonpositioned element. And if you've enjoyed sampling the recipes presented thus far, we'll have another tempting morsel for you to sink your teeth into. Danny has written a bonus recipe you won't find in the book. Check back here in two weeks to try it out.

Recipe 13.8: Determining the Location of a Nonpositioned Element

NN 6, IE 5

Problem

You want to ascertain the pixel coordinates of an element that the browser has placed during normal page flow.

Solution

The following getElementPosition( ) function returns an object with properties for the left and top absolute coordinates of the element whose ID is passed as an argument:

function getElementPosition(elemID) {
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

This function is compatible with browsers that support W3C DOM element-referencing syntax.

Discussion

The typical purpose of establishing the absolute location of an element on the page is to position some other element on it or in relation to it. Because the location of inline elements can vary widely with the browser window size and font situation, the values need to be calculated after the page has loaded, is reflowed in response to other dynamic content additions and deletions, or the window is resized.

Although some browser versions report the accurate value simply via the offsetLeft and offsetTop properties of an element, others require the addition of any offsets imposed by parent elements offering positioning contexts (the element indicated by the offsetParent property). Therefore, this function includes a loop that iterates through the offsetParent hierarchy of the element passed as an argument to the function, accumulating additional coordinate offsets if they exist.

This function is not needed for CSS-type absolute-positioned elements because you can obtain the correct coordinates directly via the style.left and style.top properties (or via the effective style property, as retrieved through the script shown in Recipe 11.12).

See Also

Recipe 11.12 for reading initial style properties set in <style> and <link> tags.

Danny Goodman has been writing about technology and computers full-time since 1981 and is the author of Dynamic HTML: The Definitive Reference and "The Complete HyperCard Handbook."

Return to the Web Development DevCenter.