Determining position

[Let_Me_Be]

I have some floating divs on my page.

When I click the div I want do display a menu over it, how can I
determine the position of the clicked div on the page?

 

[Joshie Surber]

http://www.quirksmode.org/dom/getstyles.html
You are probably looking for the top and left style values.

 

[petermichaux]

I have some floating divs on my page.

When I click the div I want do display a menu over it, how can I
determine the position of the clicked div on the page?

Richard Cornford wrote about the difficulty in doing this in general

<URL:
http://groups.google.com/group/comp.lang.javascript/msg/c46e8ec2f5fe4db3?>

Richard, if you happen to be reading, is there a chance you could post
a few of the more basic positioning moduals you have written. Or
perhaps you have a link to one of your pages which uses them?

Thank you,
Peter

 

[Benjamin]

try this:
function posMenu(menu, menuBase) {
var offsetObj;
var offsetX, offsetY = 0;
offsetObj = menuBase;
while (offsetObj) {
offsetX += offsetObj.offsetTop;
offsetY += offsetObj.offsetLeft;
offsetObj = offsetObj.offsetParent;
}
menu.style.position = "absulote";
menu.style.top = offsetX + "px";
menu.style.left = offsetY + "px";
}

 

[petermichaux]

try this:
function posMenu(menu, menuBase) {
var offsetObj;
var offsetX, offsetY = 0;

should be this?
var offsetX = 0, offsetY = 0;

offsetObj = menuBase;
while (offsetObj) {
offsetX += offsetObj.offsetTop;
offsetY += offsetObj.offsetLeft;
offsetObj = offsetObj.offsetParent;
}
menu.style.position = "absulote";

Should be "absolute"

menu.style.top = offsetX + "px";
menu.style.left = offsetY + "px";
}

I haven't written a positioning function more advanced then the one you
have shown but looking at the Yahoo! UI position function it looks like
the proposed function will only work in a limited set of simple cases
(ie. no frames etc).

Peter

 

[Benjamin]

It is true that it will only work in simple cases (if that's simple),
but I assumed that is what he wanted.

 

[RobG]

should be this?
var offsetX = 0, offsetY = 0;




Should be "absolute"


I haven't written a positioning function more advanced then the one you
have shown but looking at the Yahoo! UI position function it looks like
the proposed function will only work in a limited set of simple cases
(ie. no frames etc).

Matt Kruse has a reasonable effort as part of his JavaScript toolkit:

<URL: http://www.javascripttoolbox.com/lib/objectposition/ >


There is a simpler version at Quirksmode:

<URL: http://www.quirksmode.org/js/findpos.html >