DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 6 | WebReference

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


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

Offset Parents - elementReference.offsetParent

The offsetParent, offsetLeft and offsetTop properties are supported by Internet Explorer 4+ and NS6 and are not part of the W3C DOM specification.
They are documented at:

offsetParent: MSDN    Mozilla
offsetLeft  : MSDN    Mozilla
offsetTop   : MSDN    Mozilla

Again, the same image and the same HTML:

<HTML>
  <HEAD></HEAD>
  <BODY>
    ...
    <SPAN>
      <TABLE>
        <TR>
          ...
          <TD>
            <TABLE>
              <TR>
                <TD>
                  <IMG ID="TheWRImage" SRC="wrlogo.gif">
                </TD>
                ...
              </TR>
            </TABLE>
          </TD>
        </TR>
      </TABLE>
    </SPAN>
  </BODY>
</HTML>

The table below illustrates the document hierarchy of this page in relation to the WR logo image and with reference to the offsetParent property of elements.

Offset Parents    -     elementReference.offsetParent
Your browser:
TheWRImage | TD | TR | TABLE | TD | TR | TABLE | BODY | null
TheWRImage | TD | TABLE | TD | TABLE | BODY | null
TheWRImage | BODY | null
TheWRImage | HTML | null

The results are again quirky.

IE4 includes the TR element in a hierarchy of offset parents.

This was changed in IE5, since the inclusion of TR is somehow redundant.

A TR is not a real offset parent.
A TR is always horizontally offset 0 pixels from the left edge of a TABLE.
Therefore, the offsetLeft value of a contained TD element is the same whether the TR or the TABLE is regarded as the TD's offsetParent.

A TD is always vertically offset 0 pixels from the left edge of a TR.
Therefore, the offsetTop value of a contained TD element is the same as the TR's offsetTop value.

In NS6, the offsetParent is always the document's root element. If the page's DOCTYPE declaration forces NS6 into standards-compliant mode, the root element is HTML. Otherwise, it is BODY.

Calculating Element Page Position

An element's offsetLeft and offsetTop properties return the pixel distance the element is offset from its offsetParent. Therefore, by moving up through a document hierarchy and retrieving the offsetLeft and offsetTop properties of every offsetParent, we can calculate an element's true page position by simply summing these values.

The following table illustrates this:

Note:
The "Your Browser:" element is the only one that will display the exact values for this page, since its content was dynamically inserted after calculations were performed during page load.
The values retrieved depend on the page layout, of course, which in this page includes advertisement size, which can change. The static entries, below, may not be pixel-correct as they are hard-coded and are to be used for comparative reference purposes only.
Element Page Position Calculated Using Positions of Offset Parents
Your browser: n/a
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent = TR
TheWRImage.offsetParent.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 1
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 197
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 4
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = TR
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 10
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 71
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 20 (1 + 0 + 2 + 1 + 4 + 2 + 10 + 0)
Top (y) Page Position of TheWRImage = 273 (1 + 0 + 2 + 197 + 0 + 2 + 71 + 0)
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 181
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 1
TheWRImage.offsetParent.offsetParent.offsetTop = 65
TheWRImage.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 6
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 10
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 71
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 20 (1 + 2 + 1 + 6 + 10 + 0)
Top (y) Position of TheWRImage = 321 (181 + 2 + 65 + 2 + 71 + 0)
jfdhkjdhfkjhkldshfklsdfhklsdjfhklshdfklhfdkldfsh
TheWRImage.offsetLeft = 12
TheWRImage.offsetTop = 284
TheWRImage.offsetParent = BODY
TheWRImage.offsetParent.offsetLeft = 8
TheWRImage.offsetParent.offsetTop = 8
TheWRImage.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 20 (12 + 8)
Top (y) Position of TheWRImage = 292 (284 + 8)
TheWRImage.offsetLeft = 12
TheWRImage.offsetTop = 284
TheWRImage.offsetParent = HTML
TheWRImage.offsetParent.offsetLeft = 8
TheWRImage.offsetParent.offsetTop = 8
TheWRImage.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 20 (12 + 8)
Top (y) Position of TheWRImage = 292 (284 + 8)

Notice that if the page's DOCTYPE declaration forces IE6 into standards-compliant mode, the BODY element can also have values for offsetLeft and offsetTop, whereas if backward-compatibility is in effect (as it is on this page) the values are always 0.

But notice above all, that regardless of which elements are regarded as offset parents and what mode the browser is in, adding up the offsetLeft and offsetTop values through a hierarchy will always give you the true page position of an element.

Let's repeat this example with a positioned element.




Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: August 26, 2002

URL: http://www.webreference.com/dhtml/diner/realpos1/5.html


Justtechjobs.comFind a programming school near you






Online Campus Both