location of div top and left in webpage
Simon Wigzell
pages are different lengths of course so that location of the div in pixels
from the top of the page changes with each page. I need to access the
location of a div within this footer for reasons I won't go into. The footer
may of may not be nested inside other absolute divs, depending on the page.
This:
var obj = document.getElementById('BottomMenuDiv');
var xlocation = parseInt(obj.offsetLeft);
var ylocation = parseInt(obj.offsetTop);
will give me the location of the div inside it's parent div. I would like to
do something like this:
while (obj.parent)
{
obj = obj.parent;
xlocation = xlocation + parseInt(obj.offsetLeft);
ylocation = ylocation + parseInt(obj.offsetTop);
}
to go all the way to the top of the page. (Or is there some way to get the
divs absolute position without going through it's parents?) What would be
the syntax to do this? Thanks!
Fred Oz
[snip]
> will give me the location of the div inside it's parent div. I would like to
> do something like this:
>
> while (obj.parent)
> {
> obj = obj.parent;
> xlocation = xlocation + parseInt(obj.offsetLeft);
> ylocation = ylocation + parseInt(obj.offsetTop);
> }
>
> to go all the way to the top of the page. (Or is there some way to get the
> divs absolute position without going through it's parents?) What would be
> the syntax to do this? Thanks!
[snip]
Pretty straight forward. Of course, offsetTop and offsetWidth are not
part of the spec. so you *must* do feature detection first and your
page functionality should not be dependent upon it.
Having given the caveat, now the code... The following will pop up an
alert with the tree back to the root document element, giving each
offset and the total. Naturally you can trim out all the message stuff
and counter, but it's nice for debug whilst developing.
It has been only lightly tested in Safari, Camino, Firefox on Mac. It
does not work in IE 5.2 Mac. Feature detection uses two different
tests - the first works in Camino & Firefox, the other in Safari
(neither in IE 5.2 Mac) so I'm pretty confident it will work on any
similar browser on Windows (but maybe not IE, you'll have to find some
other method perhaps).
You can play with wrapping it in as many elements as you like, I didn't
test it that much.
<script type="text/javascript">
function getOs(theThing) {
var osL = 0;
var osT = 0;
var msg = '';
var i = 0;
if ((theThing.offsetLeft && theThing.offsetTop) ||
(document.body.offsetLeft && document.body.offsetTop)) {
while (theThing.parentNode) {
++i;
msg += '\n' + i + ': '
+ theThing.parentNode
+ ' offsetLeft: '
+ theThing.offsetLeft
+ ' offsetTop: '
+ theThing.offsetTop;
osL += +theThing.offsetLeft;
osT += +theThing.offsetTop;
theThing = theThing.parentNode;
}
alert('Totals: offsetLeft = ' + osL
+ ' & offsetTop = ' + osT
+ '\n' + msg);
} else {
alert('Ooops, offsetLeft && offsetTop not supported with '
+ theThing.nodeName + ' in '
+ navigator.appName + ' : '
+ navigator.appVersion);
}
}
</script>
<div id="X" style="margin-left: 50;">
<p id="zz" style="padding-left: 20;">
<a href="#" onclick="
getOs(document.getElementById('X'));
">
Report offset tree</a>
</p>
</div>
</body></html>
Fred Oz
[snip]
> Pretty straight forward.
Agggghh!! Unless you're a dill. The following line:
> + theThing.parentNode
Should of course be
+ theThing.nodeName
Some further testing shows that offsetLeft reports the element offset
within the <body>, so you may just need to add the element's offset
plus the body's (say you have a body tag with style="margin-left: 15").
The body offset seems to include any offset added to the HTML tag too -
but please test this on other browsers thoroughly.
Many seem to have default offsets, so you probably need to explicity
set the margin for all tags using styles.
Cheers Fred.
Simon Wigzell
the thing.