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

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


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

The WebReference logo appears in the left column once again, only this time it is contained in a TABLE which in turn is in a positioned element. This element is nested in another positioned element. The HTML hierarchy for the positioned element is:

<HTML>
  <HEAD></HEAD>
  <BODY>
    ...
    &ltDIV STYLE="position:absolute;">
      ...
      <SPAN STYLE="position:absolute;">
        <TABLE>
          <TR>
            ...
            <TD>
              <IMG ID="TheWRImage" SRC="wrlogo.gif">
            </TD>
          </TR>
        </TABLE>
      </SPAN>
    </DIV>
    ...
</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 positioned and static elements.

Offset Parents    -     elementReference.offsetParent
Your browser: n/a
TheWRImage | TD | TR | TABLE | SPAN | DIV | BODY | null
TheWRImage | TD | TABLE | SPAN | DIV | BODY | null
TheWRImage | TD | TABLE | SPAN | DIV | HTML | null
TheWRImage | null
TheWRImage | SPAN | DIV | BODY | null

Interesting results, you will agree.

In IE, moving up the element hierarchy, we first encounter the static elements that define coordinate systems, TD and TABLE. In IE4, we meet the TR as well, of course. When we reach the first positioned element, the SPAN, we break out of the static hierarchy and enter the hierarchy of positioned elements. The SPAN is offset within the DIV, another positioned element. Finally the DIV, top-most in the positioned element hierarchy is offset within the page's root element: BODY (or HTML if the page forces IE6 into standards-compliant mode.)

The NS6 results are what you would expect, since it regards only the document root element and positioned elements as elements that define new co-ordinate systems.

However, this NS6 behavior was introduced on July 10, 2001.
See our discussion elsewhere on DHTML Lab.

Gecko engine browsers released prior to this date regarded positioned elements as existing outside any hierarchy, even if they were nested within other positioned elements. Fair enough. On that mid-summer day in 2001 the behavior was changed to conform (more or less) to the IE behavior, to help developers avoid double-coding. But it seems that in the old Gecko browsers, static elements contained within positioned elements (like our logo IMG) were also regarded as belonging to unique hierarchies. This was poor behavior and thankfully was fixed when the behavior switch occurred.

Now, grab the positioned element above and drag it around the page. Grab and drag the logo. The values in the "Your browser:" element below will change to reflect the new position.

Note:
In many NS6 versions, if you drag the logo outside the DIV containing element, you may experience display refresh problems and see logo in more than one position. Simply force a display refresh yourself (by minimizing and restoring the browser window, for example) to get a clean display. This is a NS6 bug but does not affect what we are trying to illustrate with our example.
Element Page Position Calculated Using Positions of Offset Parents
Your browser:
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 80
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 = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = SPAN
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 30
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 125
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = DIV
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 20
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 214
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 133 (1 + 80 + 2 + 0 + 30 + 20 + 0)
Top (y) Page Position of TheWRImage = 342 (1 + 0 + 2 + 0 + 125 + 214 + 0)
TheWRImage.offsetLeft = 1
TheWRImage.offsetTop = 1
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 85
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent = SPAN
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 30
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 125
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = DIV
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 20
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 214
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 (window)

Left (x) Page Position of TheWRImage = 136 (1 + 85 + 0 + 30 + 20 + 0)
Top (y) Page Position of TheWRImage = 342 (1 + 2 + 0 + 125 + 214 + 0)
TheWRImage.offsetLeft = 4
TheWRImage.offsetTop = 65
TheWRImage.offsetParent = TD
TheWRImage.offsetParent.offsetLeft = 6
TheWRImage.offsetParent.offsetTop = 2
TheWRImage.offsetParent.offsetParent = TABLE
TheWRImage.offsetParent.offsetParent.offsetLeft = 10
TheWRImage.offsetParent.offsetParent.offsetTop = 71
TheWRImage.offsetParent.offsetParent.offsetParent = HTML
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = null (window)
realX = 20 (4 + 6 + 10 + 0)
realY = 138 (65 + 2 + 71 + 0)
TheWRImage.offsetLeft = 51
TheWRImage.offsetTop = 395
TheWRImage.offsetParent = null

Left (x) Page Position of TheWRImage = 51 (51)
Top (y) Page Position of TheWRImage = 395 (395)
TheWRImage.offsetLeft = 0
TheWRImage.offsetTop = 0
TheWRImage.offsetParent = SPAN
TheWRImage.offsetParent.offsetLeft = 30
TheWRImage.offsetParent.offsetTop = 125
TheWRImage.offsetParent.offsetParent = DIV
TheWRImage.offsetParent.offsetParent.offsetLeft = 527
TheWRImage.offsetParent.offsetParent.offsetTop = 184
TheWRImage.offsetParent.offsetParent.offsetParent = BODY
TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 0
TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = null

Left (x) Page Position of TheWRImage = 557 (0 + 30 + 527 + 0)
Top (y) Page Position of TheWRImage = 309 (0 + 125 + 184 + 0)

As mentioned, in IE4+ for Windows and NS6, regardless of browser version, browser quirks, browser bugs and browser mode, adding up the offsetLeft and offsetTop values through an element offset hierarchy will always give you the true page position of the element.

Of course, we can create simple functions that will perform the calculations for us!



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/6.html



 I'm draggable
 too!
I'm draggable
I am a position element. The WR logo is contained within a nested positioned element. Drag the contained element to a new position relative to me, or move both by dragging me.
Justtechjobs.comFind a programming school near you






Online Campus Both