CSS and javascript, find absolute position of element

[Knut]

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.

 

[George Hester]

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 {leftffsetLeft,topffsetTop};
}

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>