DHTML Lab - DHTML Diner - IE4: Element Page Coordinates

Determining Element Page Coordinates

You're writing for Explorer 4;
Do you know where your elements are?

Although Explorer 4 provides us with a fully-exposed document object model, and a myriad of properties and methods to manipulate it through scripting, it lacks element properties that reflect the x-y position of these elements on the page.

Netscape Navigator, on the other hand, with a poorer script-enabled DOM, does allow us to determine the page position of a few elements:

Positioned Elements (read/write):
elementReference.pageX and
elementReference.pageY

Images (read-only):
imageReference.x and
imageReference.y

Links (read-only):
linkReference.x and
linkReference.y

Explorer Properties

Positioned Elements
Positioned elements, as we know, store their x-y coordinates in the left/pixelLeft/posLeft and top/pixelTop/posTop properties of their style object. These read/write properties, however, reflect the distance of the element from the containing element. A top-level positioned element is contained within the BODY element, synonymous with the window object for the purpose of determining position. The above properties will, therefore, give us the page position. If we have a positioned element nested within another positioned element, the above properties return the position of the nested element within the parent element, not the page position.

All positioned elements define the beginning of a new coordinate system. The position properties of all contained elements reflect the distance of the elements from the top-left of the containing element.

Regular HTML Elements
All HTML elements, positioned or not, have two read-only properties that reflect position:

elementReference.offsetLeft and
elementReference.offsetTop

All HTML elements also have two properties that store the two types of parent elements that every element has:

elementReference.parentElement and
elementReference.offsetParent

An element is nested within its parentElement.
An element is positioned within its offsetParent.

For example, in this snippet of HTML:

<TABLE>
  <TR>
    <TD>
      <P>
        <B>
          <I ID="boldItalic">I am bold-italic text</I>
        </B>
      </P>
    </TD>
  </TR>
</TABLE>

The boldItalic element (<I>) is nested within the <B> element.
The boldItalic element (<I>) is positioned within the <TD> element.

The parentElement of boldItalic is the <B> element.
The offsetParent of boldItalic is the <TD> element.

As you can see, there are regular HTML elements that act like positioned elements in defining new coordinate systems. TABLE, TR and TD are three of these. The reason should be immediately apparent. Their content is positioned within them, and is not part of the normal flow of the document. On the other hand, P, B, I, etc. do not affect positioning, just content display.

The parentElement and the offsetParent may be the same, depending on your page layout. The offsetParent property should be used, however, when determining position.

Now, the offsetLeft and offsetTop properties reflect the coordinates of an element within its offsetParent.

To determine the page coordinates of an element we must add its offsetLeft and offsetTop values to the offsetLeft and offsetTop of all the coordinate-determining parents that it is nested within.

This is a lot easier to do than it sounds. First, let's take a more detailed look at regular HTML positioning.