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

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


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: n/a
TheWRImage | TD | TR | TABLE | TD | TR | TABLE | BODY | null
TheWRImage | TD | TABLE | TD | TABLE | BODY | null
TheWRImage | BODY | null
TheWRImage | TD | TABLE | TD | TABLE | BODY | 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 BODY.

In NS7, the offset parent hierarchy was changed to conform to the IE5+ hierarchy.

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, are not pixel-correct as they are hard-coded and retrieved from separate page loads with different dynamic page layouts (tall/short ads, narrow/wide ads, etc.) They are to be used for comparative reference purposes only. If you want to see the results in a browser other than the one you are using, it is best to load this page in that browser as well.
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 = 220
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 124
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 = 160
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 = 140 (1 + 0 + 2 + 1 + 124 + 2 + 10 + 0)
Top (y) Page Position of TheWRImage = 385 (1 + 0 + 2 + 220 + 0 + 2 + 160 + 0)
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 1
TheWRImage.offsetParent.offsetParent.offsetTop = 220
TheWRImage.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 170
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 50
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 205
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 = 224 (1 + 2 + 1 + 170 + 50 + 0)
Top (y) Page Position of TheWRImage = 430 (1 + 2 + 220 + 2 + 205 + 0)
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 1
TheWRImage.offsetParent.offsetParent.offsetTop = 233
TheWRImage.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 134
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 190
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 50
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 15
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 188 (1 + 2 + 1 + 134 + 0 + 50)
Top (y) Page Position of TheWRImage = 443 (1 + 2 + 233 + 2 + 190 + 15)
TheWRImage.offsetLeft = 175
TheWRImage.offsetTop = 353
TheWRImage.offsetParent = BODY
TheWRImage.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 175 (175 + 0)
Top (y) Page Position of TheWRImage = 353 (353 + 0)
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 2
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 1
TheWRImage.offsetParent.offsetParent.offsetTop = 223
TheWRImage.offsetParent.offsetParent.offsetParent = TD
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 134
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 43
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 223
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 = 181 (1 + 2 + 1 + 134 + 43 + 0)
Top (y) Page Position of TheWRImage = 451 (1 + 2 + 223 + 2 + 223 + 0)

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: https://www.webreference.com/dhtml/diner/realpos1/5.html


Justtechjobs.comFind a programming school near you






Online Campus Both