Find An Object's Page Position On Any Page - Version 0.1

[Matt Kruse]

I've never found a function which will return me the x,y position of an
object on the page reliably, cross-browser, in any type of page layout
situation. So, I've been working on my own function to accomplish this. If
anyone knows of a solution which already exists, please do let me know.

Here is my test page so far:
http://www.mattkruse.com/javascript/ObjectPositionTest.php

My goal is to reliably return an object's position on the page and have it
work:
--------------------------------------------------------------------------------
a) In all the "major" browsers, at least
b) Regardless of the doctype being missing, being loose, or being strict
c) Even if the layout includes scrollable divs and other layouts which often
cause other scripts to break

My code accomplishes these goals as closely as I have been able to get so
far.

I would love to hear feedback on any or all of the following:
-------------------------------------------------------------
a) Results in browsers which I haven't already tested (a test summary is
included at the top of the page)
b) Techniques for solving the few browser quirks that exist, like IE's
problem with relatively positioned items, or Netscape 6.2's inability to get
the scroll position of an overflowed div
c) Most test cases which I haven't covered that might cause problems in
browsers, or which might exist in common page layouts

The code is not packaged up nicely or anything right now, and it has a lot
of debugging comments in it. Once I get everything working more solidly,
I'll clean that up.

Any input would be greatly appreciated!

 

[ASM]

I've never found a function which will return me the x,y position of an
object on the page reliably, cross-browser, in any type of page layout
situation. So, I've been working on my own function to accomplish this. If
anyone knows of a solution which already exists, please do let me know.

Here is my test page so far:
http://www.mattkruse.com/javascript/ObjectPositionTest.php

My goal is to reliably return an object's position on the page and have it

Any input would be greatly appreciated!

Mac G4 MacOs 10.3.7

FireFox 1.0.4 :
blue square over red one (every tests)
- tests 3 and 10 (3 modes) :
scroll of overflowes : the blue square doesn't move / window
(same with whole tried browsers)

IE 5.2 :
- bottom right corner blue square
positioned on top left corner red square

iCab 3.0 beta280 :
- 1 : ok
- 2 : fiew px up (top blue square = top cell)
- 3 : top blue square = top of div
(if scroll before click :
blue square up from link = up-space of div
blue square not displayed in div nor on red square)
- 4 : with any of my browsers I can scroll inside this div ... (?!)
blue from red : up = 60px / left = 150px
- 5, 6, 7 : top blue = top free space of line
- 9 : top blue = top cell
- 10 : top blue = top litle overflow
scrolls overflowes : blue doesn't move
scrolls window : blue scrolls with it

Opera 8.01 :
all seem so correct that for Windows (top blue = top red)