Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > x and y coordinates

Reply
Thread Tools

x and y coordinates

 
 
Derek
Guest
Posts: n/a
 
      04-07-2005
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



 
Reply With Quote
 
 
 
 
Fred Oz
Guest
Posts: n/a
 
      04-07-2005
Derek wrote:
> 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#>


--
Fred
 
Reply With Quote
 
 
 
 
Ulrik Skovenborg
Guest
Posts: n/a
 
      04-07-2005
Derek wrote:
> 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.offse tTop,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;
 
Reply With Quote
 
Justin Koivisto
Guest
Posts: n/a
 
      04-07-2005
Ulrik Skovenborg wrote:

> Derek wrote:
> > 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.offse tTop,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?

--
Justin Koivisto - http://www.velocityreviews.com/forums/(E-Mail Removed)
http://koivi.com
 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      04-07-2005

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

 
Reply With Quote
 
Justin Koivisto
Guest
Posts: n/a
 
      04-07-2005
RobB wrote:

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

--
Justin Koivisto - (E-Mail Removed)
http://koivi.com
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
X and Y coordinates of Link Button =?Utf-8?B?UG9rZXJKb2tlcg==?= ASP .Net 1 06-22-2006 01:31 AM
How to change the X and Y coordinates for a .NET WebForm Hyperlink jarrett.roberts@gmail.com ASP .Net 3 06-06-2006 12:09 AM
Javascript and Style coordinates Question Lars Netzel ASP .Net 2 08-16-2005 05:47 AM
Converting canvas coordinates to window coordinates in tkinter......... Suresh Kumar Python 0 07-04-2003 10:14 AM
Converting canvas coordinates to window coordinates....... Suresh Kumar Python 0 07-03-2003 04:53 AM



Advertisments