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

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

To determine an element's true page position, we need functions that will move up through the offset parent hierarchy, adding the offsetLeft and offsetTop values of each parent to those of the element.

As we have seen, the value of the offsetParent property of the topmost element in a hierarchy is null, so we can test for the null value to determine when our calculations should terminate.

We'll call our functions that determine the left and top page positions of an element DL_GetElementLeft and DL_GetElementTop. The DL_ identifies the function as a DHTML Lab function and helps avoid conflict with other functions on your page.

Functions with Element Argument

Our functions take one argument, the element itself as an object reference, and return the position requested as a number:

function DL_GetElementLeft(eElement)
{
    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)
{
    var nTopPos = eElement.offsetTop;            // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nTopPos += eParElement.offsetTop;        // appending top offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nTopPos;                              // return the number calculated
}

Assign the returned values to variables in this way in your script:

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

Functions as Element Methods

If it is more meaningful in your script to have element methods to determine position, the functions would read:

function DL_GetElementLeft()
{
    var nLeftPos = this.offsetLeft;         // this keyword refers to element
    var eParElement = this.offsetParent;
    while (eParElement != null)
    {
        nLeftPos += eParElement.offsetLeft;
        eParElement = eParElement.offsetParent;
    }
    return nLeftPos;
}
function DL_GetElementTop()
{
    var nTopPos = this.offsetTop;
    var eParElement = this.offsetParent;
    while (eParElement != null)
    {
        nTopPos += eParElement.offsetTop;
        eParElement = eParElement.offsetParent;
    }
    return nTopPos;
}

The functions must be defined as methods of the element:

elementReference.getTrueXPosition = DL_GetElementLeft;
elementReference.getTrueYPosition = DL_GetElementTop;

and called in this way:

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

In order to make the functions as flexible as possible, they can be made to accept an argument and be declared as methods.