x and y coordinates

Discussion in 'Javascript' started by Derek, Apr 7, 2005.

  1. Derek

    Derek Guest

    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
     
    Derek, Apr 7, 2005
    #1
    1. Advertisements

  2. Derek

    Fred Oz Guest

    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
     
    Fred Oz, Apr 7, 2005
    #2
    1. Advertisements

  3. 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.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;
     
    Ulrik Skovenborg, Apr 7, 2005
    #3
  4. 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.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?

    --
    Justin Koivisto -
    http://koivi.com
     
    Justin Koivisto, Apr 7, 2005
    #4
  5. Derek

    RobB Guest

    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;
    }
     
    RobB, Apr 7, 2005
    #5
  6. 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 -
    http://koivi.com
     
    Justin Koivisto, Apr 7, 2005
    #6
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lars Netzel

    Javascript and Style coordinates Question

    Lars Netzel, Aug 15, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    460
    Lars Netzel
    Aug 16, 2005
  2. Replies:
    3
    Views:
    713
  3. =?Utf-8?B?UG9rZXJKb2tlcg==?=

    X and Y coordinates of Link Button

    =?Utf-8?B?UG9rZXJKb2tlcg==?=, Jun 21, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    530
    Kevin Spencer
    Jun 22, 2006
  4. Suresh  Kumar
    Replies:
    0
    Views:
    794
    Suresh Kumar
    Jul 3, 2003
  5. Suresh  Kumar
    Replies:
    0
    Views:
    727
    Suresh Kumar
    Jul 4, 2003
  6. Gerrit Holl

    tuples and cartesian coordinates

    Gerrit Holl, Dec 17, 2003, in forum: Python
    Replies:
    5
    Views:
    637
    Terry Reedy
    Dec 18, 2003
  7. Penn
    Replies:
    5
    Views:
    834
  8. Ken Starks
    Replies:
    1
    Views:
    455
    John J. Lee
    Aug 1, 2007
Loading...