[Javascript] offsetParent and position. (Any guru awake?)
Hakan M.
hakan at backbase.com
Tue Dec 16 08:55:40 CST 2003
Righteo people, here's a mouthful for you. I have a nice and working
function for getting the exact coordinates of any element anywhere on
the screen, be it absolutely positioned or floating wild. I am, of
course, walking upwards from the element I wish to measure, using
offsetParent, adding appropriate offsetTop/offsetLeft,
scrollTop/scrollLeft-values as I go.
Now it works, real good, EXCEPT; When creating a DIV (for example) and
giving it a height and overflow:scroll things start to break down, at
least in Mozilla.
Consider the following code:
_______________________________________
<div style="height:200px;overflow:scroll">
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<span id="WankerSpan">Wank Wank Wank</span>
</div>
_______________________________________
If I scroll the div, the coordinates I get from "WankerSpan" will be
misplaced with... that's right, the amount of pixels I have scrolled.
Now don't get me wrong here, I'm not stupid enough to forget about the
scrollTop value, you see, THIS code actually works, and gives me the
correct coordinates of "WankerSpan":
_______________________________________
<div style="position:relative;height:200px;overflow:scroll">
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<br /><br /><br /><br /><br />
<span id="WankerSpan">Wank Wank Wank</span>
</div>
_______________________________________
A quick testcase revealed to me that unless the div has a position set
to relative or absolute the browser doesn't consider it to be an
offsetParent, thus not giving me its scrollTop/scrollLeft values. Oh,
position:static didn't work either.
So, wa-wa-wa-what's up, Moz? Or is it *illegal* to set overflow:scroll
on a non-positioned element according to any specs or recommendations?
Surprisingly enough, Internet Explorer doesn't give a rats ass regarding
the positioning of my div, I get the "WankerSpan" coordinates right
every time.
Pointers, explanations, curses, anything goes.
Thankyou in advance,
Hakan.
More information about the Javascript
mailing list