Velocity Reviews > Determining position

# Determining position

Let_Me_Be
Guest
Posts: n/a

 09-09-2006
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
Guest
Posts: n/a

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

Let_Me_Be wrote:
> 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?

petermichaux@gmail.com
Guest
Posts: n/a

 09-09-2006
Let_Me_Be wrote:
> 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:

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
Guest
Posts: n/a

 09-10-2006
try this:
var offsetObj;
var offsetX, offsetY = 0;
while (offsetObj) {
offsetX += offsetObj.offsetTop;
offsetY += offsetObj.offsetLeft;
offsetObj = offsetObj.offsetParent;
}
}
Let_Me_Be wrote:
> 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?

petermichaux@gmail.com
Guest
Posts: n/a

 09-10-2006

Benjamin wrote:
> try this:
> var offsetObj;
> var offsetX, offsetY = 0;

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

> while (offsetObj) {
> offsetX += offsetObj.offsetTop;
> offsetY += offsetObj.offsetLeft;
> offsetObj = offsetObj.offsetParent;
> }

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
Guest
Posts: n/a

 09-10-2006
It is true that it will only work in simple cases (if that's simple),
but I assumed that is what he wanted.
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Benjamin wrote:
> > try this:
> > var offsetObj;
> > var offsetX, offsetY = 0;

>
> should be this?
> var offsetX = 0, offsetY = 0;
>
>
>
> > while (offsetObj) {
> > offsetX += offsetObj.offsetTop;
> > offsetY += offsetObj.offsetLeft;
> > offsetObj = offsetObj.offsetParent;
> > }

>
> 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

RobG
Guest
Posts: n/a

 09-10-2006

(E-Mail Removed) wrote:
> Benjamin wrote:
> > try this:
> > var offsetObj;
> > var offsetX, offsetY = 0;

>
> should be this?
> var offsetX = 0, offsetY = 0;
>
>
>
> > while (offsetObj) {
> > offsetX += offsetObj.offsetTop;
> > offsetY += offsetObj.offsetLeft;
> > offsetObj = offsetObj.offsetParent;
> > }

>
> 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).

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 >

--
Rob