location of div top and left in webpage

Discussion in 'Javascript' started by Simon Wigzell, Sep 28, 2004.

  1. 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!
     
    Simon Wigzell, Sep 28, 2004
    #1
    1. Advertising

  2. Simon Wigzell

    Fred Oz Guest

    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>
     
    Fred Oz, Sep 29, 2004
    #2
    1. Advertising

  3. Simon Wigzell

    Fred Oz Guest

    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.
     
    Fred Oz, Sep 29, 2004
    #3
  4. Thanks very much, I was unaware of parentNode and nodeName, they are just
    the thing.
     
    Simon Wigzell, Sep 29, 2004
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve Kershaw
    Replies:
    1
    Views:
    411
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    Oct 24, 2006
  2. find clausen

    window.opener.top.location.top.close ???

    find clausen, Oct 5, 2003, in forum: Javascript
    Replies:
    2
    Views:
    455
    find clausen
    Oct 5, 2003
  3. lawrence
    Replies:
    13
    Views:
    341
    Thomas 'PointedEars' Lahn
    Sep 4, 2004
  4. Rick
    Replies:
    1
    Views:
    101
  5. Stevo
    Replies:
    10
    Views:
    311
    Thomas 'PointedEars' Lahn
    Mar 27, 2008
Loading...

Share This Page