Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > location of div top and left in webpage

Reply
Thread Tools

location of div top and left in webpage

 
 
Simon Wigzell
Guest
Posts: n/a
 
      09-28-2004
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!


 
Reply With Quote
 
 
 
 
Fred Oz
Guest
Posts: n/a
 
      09-29-2004
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>
 
Reply With Quote
 
 
 
 
Fred Oz
Guest
Posts: n/a
 
      09-29-2004
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.
 
Reply With Quote
 
Simon Wigzell
Guest
Posts: n/a
 
      09-29-2004
Thanks very much, I was unaware of parentNode and nodeName, they are just
the thing.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I change the top: and left: StyleSheet locations on a <div>? Steve Kershaw ASP .Net 1 10-23-2006 11:05 PM
Div's top and left style properties yield NaN Rick Javascript 1 09-28-2005 09:52 AM
<H1> causing a gap between head div and left column / content div Kate HTML 4 02-19-2005 10:22 PM
Re: <H1> causing a gap between head div and left column / content div Kate HTML 1 02-19-2005 06:20 PM
can't reset the left value of a DIV using document.getElementById(thisDiv).style.left = howFarLeft; lawrence Javascript 13 09-04-2004 09:07 PM



Advertisments