location of div top and left in webpage

S

Simon Wigzell

I have a footer that is appended to all of my web pages as an include. The
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!
 
F

Fred Oz

Simon Wigzell wrote:

[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>
 
F

Fred Oz

Fred Oz wrote:

[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.
 
S

Simon Wigzell

Thanks very much, I was unaware of parentNode and nodeName, they are just
the thing.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top