<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>
<channel>
	<title>Comments on: Get X/Y Offsets for an Object in JavaScript</title>
	<atom:link href="http://www.davidcramer.net/code/84/get-offsets-xy-for-an-object-javascript.html/feed" rel="self" type="application/rss+xml" />
	<link>http://www.davidcramer.net/code/84/get-offsets-xy-for-an-object-javascript.html</link>
	<description>A blog about Django, JavaScript, CSS, and general web development.</description>
	<pubDate>Fri, 25 Jul 2008 10:32:29 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6</generator>
		<item>
		<title>By: anthony</title>
		<link>http://www.davidcramer.net/code/84/get-offsets-xy-for-an-object-javascript.html#comment-19849</link>
		<dc:creator>anthony</dc:creator>
		<pubDate>Wed, 23 Apr 2008 05:35:58 +0000</pubDate>
		<guid isPermaLink="false">http://www.davidcramer.net/code/84/get-offsets-xy-for-an-object-javascript.html#comment-19849</guid>
		<description>Thank you! I thought I was going crazy when the "standard" X/Y javascript functions simply didn't work.

There seems to be a bit of debug code left in your sample above, below is a slightly modified version that works for me.

I've also added support for object padding, which also causes the co-ordinates to be off.

Finally, i found that an object may not be set to position=relative, so I changed the logic to be != absolute.

/**
 * Returns the absolute X and Y positions of an object.
 * @param {HTMLObject} obj HTML Object.
 * @return {Object} Returns an accessor with .x and .y values.
 */
function getXY(obj)
{
  var curleft = 0;
  var curtop = 0;
  var border;
  var padding;
  if (obj.offsetParent)
  {
    do
    {
      // XXX: If the element is position: relative we have to add borderWidth
      if (getStyle(obj, 'position') != 'absolute')
      {
        if (border = getStyle(obj, 'border-top-width')) curtop += parseInt(border);
        if (border = getStyle(obj, 'border-left-width')) curleft += parseInt(border);

        if (padding = getStyle(obj, 'padding-top')) curtop += parseInt(padding);
        if (padding = getStyle(obj, 'padding-left')) curleft += parseInt(padding);
      }
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    }
    while (obj = obj.offsetParent)
  }
  else if (obj.x)
  {
    curleft += obj.x;
    curtop += obj.y;
  }
  return {'x': curleft, 'y': curtop};
}</description>
		<content:encoded><![CDATA[<p>Thank you! I thought I was going crazy when the &#8220;standard&#8221; X/Y javascript functions simply didn&#8217;t work.</p>
<p>There seems to be a bit of debug code left in your sample above, below is a slightly modified version that works for me.</p>
<p>I&#8217;ve also added support for object padding, which also causes the co-ordinates to be off.</p>
<p>Finally, i found that an object may not be set to position=relative, so I changed the logic to be != absolute.</p>
<p>/**<br />
 * Returns the absolute X and Y positions of an object.<br />
 * @param {HTMLObject} obj HTML Object.<br />
 * @return {Object} Returns an accessor with .x and .y values.<br />
 */<br />
function getXY(obj)<br />
{<br />
  var curleft = 0;<br />
  var curtop = 0;<br />
  var border;<br />
  var padding;<br />
  if (obj.offsetParent)<br />
  {<br />
    do<br />
    {<br />
      // XXX: If the element is position: relative we have to add borderWidth<br />
      if (getStyle(obj, &#8216;position&#8217;) != &#8216;absolute&#8217;)<br />
      {<br />
        if (border = getStyle(obj, &#8216;border-top-width&#8217;)) curtop += parseInt(border);<br />
        if (border = getStyle(obj, &#8216;border-left-width&#8217;)) curleft += parseInt(border);</p>
<p>        if (padding = getStyle(obj, &#8216;padding-top&#8217;)) curtop += parseInt(padding);<br />
        if (padding = getStyle(obj, &#8216;padding-left&#8217;)) curleft += parseInt(padding);<br />
      }<br />
      curleft += obj.offsetLeft;<br />
      curtop += obj.offsetTop;<br />
    }<br />
    while (obj = obj.offsetParent)<br />
  }<br />
  else if (obj.x)<br />
  {<br />
    curleft += obj.x;<br />
    curtop += obj.y;<br />
  }<br />
  return {&#8217;x': curleft, &#8216;y&#8217;: curtop};<br />
}</p>
]]></content:encoded>
	</item>
</channel>
</rss>
