CSS and javascript, find absolute position of element

Discussion in 'Javascript' started by Knut, Oct 14, 2004.

  1. Knut

    Knut Guest

    Hello everybody.

    This is my first attempt at Javascript, something that is long
    overdue. But please bear that in mind, and have mercy (=

    My question is simple:

    I'm doing a dropdown menu system to work on the <div>'s produced by
    our CMS, and every menubutton div has a onMouseOver="openSubmenu(this,
    'popup1234')", where popup 1234 is the id of the div with the proper
    menu items. (its a bit more complicated, with some timeouts etc.)
    All this works fine, and the system is usable, but I want to make it
    even better by adding a function to detect if the mouse pointer is
    close to the open submenu after its left it.

    The idea is to keep the submenu open if the pointer is within 30px in
    each direction.

    The problem is that I cannot find a way to get the position of the
    nested <DIV> that is the submenu, relative to the WHOLE document
    (where I capture mouse events)

    The div is nested within a series of divs with absolute, float and
    relative positions....

    Can someone please enlighten me on how to get this position? Help is
    greatly appreciated!

    Cheers,
    .. Knut S.
    Knut, Oct 14, 2004
    #1
    1. Advertising

  2. "Knut" <> wrote in message news:...
    > Hello everybody.
    >
    > This is my first attempt at Javascript, something that is long
    > overdue. But please bear that in mind, and have mercy (=
    >
    > My question is simple:
    >
    > I'm doing a dropdown menu system to work on the <div>'s produced by
    > our CMS, and every menubutton div has a onMouseOver="openSubmenu(this,
    > 'popup1234')", where popup 1234 is the id of the div with the proper
    > menu items. (its a bit more complicated, with some timeouts etc.)
    > All this works fine, and the system is usable, but I want to make it
    > even better by adding a function to detect if the mouse pointer is
    > close to the open submenu after its left it.
    >
    > The idea is to keep the submenu open if the pointer is within 30px in
    > each direction.
    >
    > The problem is that I cannot find a way to get the position of the
    > nested <DIV> that is the submenu, relative to the WHOLE document
    > (where I capture mouse events)
    >
    > The div is nested within a series of divs with absolute, float and
    > relative positions....
    >
    > Can someone please enlighten me on how to get this position? Help is
    > greatly appreciated!
    >
    > Cheers,
    > . Knut S.


    I put this in a js file call it in the html.

    function getElementPosition(elemID){
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail){
    offsetLeft += offsetTrail.offsetLeft;
    offsetTop += offsetTrail.offsetTop;
    offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != 'undefined'){
    offsetLeft += document.body.leftMargin;
    offsetTop += document.body.topMargin;
    }
    return {left:eek:ffsetLeft,top:eek:ffsetTop};
    }

    Courtesy of Danny Goodman

    Then:
    Called in your html like this:

    <div id="popup1234" ...>
    <!- -->
    </div>

    <script type="text/javascript">
    alert(getElementPosition('popup1234').top+'|'+getElementPosition('popup1234').left);
    </script>

    --
    George Hester
    __________________________________
    George Hester, Oct 15, 2004
    #2
    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. Luqman
    Replies:
    1
    Views:
    645
    Luqman
    Feb 7, 2006
  2. Microsoft Newsserver

    page element - absolute position

    Microsoft Newsserver, Apr 18, 2008, in forum: ASP .Net
    Replies:
    0
    Views:
    313
    Microsoft Newsserver
    Apr 18, 2008
  3. Chris Leonard

    How to get the absolute position of an element

    Chris Leonard, Aug 31, 2003, in forum: Javascript
    Replies:
    5
    Views:
    98
    Chris Leonard
    Sep 2, 2003
  4. Stephan Koser

    Absolute position of a relative element

    Stephan Koser, Jun 14, 2004, in forum: Javascript
    Replies:
    7
    Views:
    125
    Mike Foster
    Jun 18, 2004
  5. Pugi!
    Replies:
    10
    Views:
    192
    Randy Webb
    Dec 19, 2006
Loading...

Share This Page