DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 10

Determining Element Page Coordinates, Part 1
IE for Windows, NS6

Functions as Element Methods or with Element Argument

If your scripts can make use of both types of functions, then they can be modified to read:

function DL_GetElementLeft(eElement)
{
    if (!eElement && this)                       // if argument is invalid
    {                                            // (not specified, is null or is 0)
        eElement = this;                         // and function is a method
    }                                            // identify the element as the method owner
    
    var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nLeftPos;                             // return the number calculated
}
function DL_GetElementTop(eElement)
{
    if (!eElement && this)
    {
        eElement = this;
    }
    var nTopPos = eElement.offsetTop;
    var eParElement = eElement.offsetParent;
    while (eParElement != null)
    {
        nTopPos += eParElement.offsetTop;
        eParElement = eParElement.offsetParent;
    }
    return nTopPos;
}

These functions can be called in either of two ways:

elementReference.getTrueXPosition = DL_GetElementLeft;
elementReference.getTrueYPosition = DL_GetElementTop;
var nMyElementsTrueXPosition = elementReference.getTrueXPosition();
var nMyElementsTrueYPosition = elementReference.getTrueYPosition();

or:

var nMyElementsTrueXPosition = DL_GetElementLeft(elementReference);
var nMyElementsTrueYPosition = DL_GetElementTop(elementReference);

What Now?

These functions could have been introduced without the verbose preamble on parent elements and hierarchies, but they would not have been placed in context. Hopefully, we have learned a lot along the way, if not about document hierarchies, then at least about how simple properties are handled in the two browser types discussed.

The browser vendors are making it up as they go along. We have seen the same properties change behavior:

• between versions (IE4/IE5 TR behavior; IE5/IE6 parentNode behavior, NS6/NS7 offsetParent behavior),
• between nightly builds (Gecko 20010709/Gecko 20010710) and,
• between modes (IE6 standards mode/non-standards mode)

for various reasons, like:

• acceptance of redundancy (IE4/IE5 TR behavior)
• conformity to a more popular vendor's standard (Gecko after 20010710, NS7)
• conformity to a W3C standard (IE6 parentNode behavior) even in non-standard mode

We have also, unfortunately, seen that one of the simplest of DHTML tasks (retrieving element position) cannot be globally accomplished using properties sanctioned by the standards body.

offsetTop and offsetLeft are IE properties adopted by the Mozilla group and not part of the W3C Dom spec.

If we stuck to standards and standards only, we would have a difficult time as developers.

er... Excuse Me

Yes, the hawk-eyed among you will have noticed that in the positioned element example, there is a one-pixel error in the values returned by our functions. Drag the image to the browser left or top edge, where you expect a value of 0 (zero) to be returned. You should see a value of -1. Why?

We'll examine the role that element borders and the clientLeft/clientTop properties play in determining element position in our next installment.

Our aim is to build on the functions above until they can return the position of any element possible in any browser, under any styling conditions.