x and y coordinates

[Derek]

How can I find out (using JavaScript) the x and y coordinates of a HTML
element, e.g. an image, an anchor, a div?


Thanks for the help.
Derek

 

[Fred Oz]

How can I find out (using JavaScript) the x and y coordinates of a HTML
element, e.g. an image, an anchor, a div?

[...]

Search for "findPosX" posted in the last couple of days.

Have a poke around quirksmode.org:

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

 

[Ulrik Skovenborg]

How can I find out (using JavaScript) the x and y coordinates of a HTML
element, e.g. an image, an anchor, a div?

This little function should do the trick (credit to jumper on
http://eksperten.dk):

function getPos(elm) {
for(var
zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}

To use the function you should use an object (an image, div etc.) as the
argument. The function returns another object with the x and y coordinates:

elm = document.getElementById("divElement");
pos = getPos(elm);
alert(pos.x); // this is the x-coordinate
alert(pos.y); // ..and the y-coordinate
// You can also do something like this:
coordinateX = getPos(elm).x;
// or
coordinateY = getPos(document.getElementById("divElement")).y;

 

[Justin Koivisto]

This little function should do the trick (credit to jumper on
http://eksperten.dk):

function getPos(elm) {
for(var
zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);

return {x:zx,y:zy}
}

To use the function you should use an object (an image, div etc.) as the
argument. The function returns another object with the x and y coordinates:

elm = document.getElementById("divElement");
pos = getPos(elm);
alert(pos.x); // this is the x-coordinate
alert(pos.y); // ..and the y-coordinate
// You can also do something like this:
coordinateX = getPos(elm).x;
// or
coordinateY = getPos(document.getElementById("divElement")).y;

Does that take into consideration absolutely positioned elements when
using CSS?

 

[RobB]

Justin Koivisto wrote:

(snip)

Does that take into consideration absolutely positioned elements when

using CSS?

Yes. The offset[Left/Top/Width/Height] properties are calculated by the
browser when laying out the page; they're read-only, and available
regardless of whether CSS was even used to position the object. There
are a few browser-specific wrinkles that crop up, but the accumulated
offsets are reasonably accurate. Here's an alternative if you only need
one coordinate (takes id or object ref):

function getLeft(obj)
{
if ('string' == typeof obj)
obj = document.getElementById(obj);
var x = 0;
while (obj != null)
{
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return x;
}

function getTop(obj)
{
if ('string' == typeof obj)
obj = document.getElementById(obj);
var y = 0;
while (obj != null)
{
y += obj.offsetTop;
obj = obj.offsetParent;
}
return y;
}

 

[Justin Koivisto]

Justin Koivisto wrote:

(snip)

Does that take into consideration absolutely positioned elements when

using CSS?

Yes. The offset[Left/Top/Width/Height] properties are calculated by the
browser when laying out the page; they're read-only, and available
regardless of whether CSS was even used to position the object. There
are a few browser-specific wrinkles that crop up, but the accumulated
offsets are reasonably accurate. Here's an alternative if you only need
one coordinate (takes id or object ref):

function getLeft(obj)
{
if ('string' == typeof obj)
obj = document.getElementById(obj);
var x = 0;
while (obj != null)
{
x += obj.offsetLeft;
obj = obj.offsetParent;
}
return x;
}

function getTop(obj)
{
if ('string' == typeof obj)
obj = document.getElementById(obj);
var y = 0;
while (obj != null)
{
y += obj.offsetTop;
obj = obj.offsetParent;
}
return y;
}

Oops... I was thinking of something slightly different.

I used a (likely inefficient) way to find the position of an object
relative to its absolutely positioned parent (or root if there was no
CSS positioning involved) which worked out to just under 30 lines. I was
hoping to replace it all with that piece.