DHTML Lab - DHTML Diner - IE4: Element Page Coordinates
This is an Internet Explorer 4 technique. The in-page examples will only work in Explorer 4 Windows and Explorer 4 Macintosh.
Determining Element Page Coordinates
You're writing for Explorer 4;
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):
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 also have two properties that store the two types of parent elements that every element has:
An element is nested within its parentElement.
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 parentElement of boldItalic is the <B> 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.
Produced by Peter Belesis andAll Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: May 18, 1998