Getting An Elements Absolute Position

[shadowayex]

As the title suggests, I want to get an element's position in reference to its positioning from the edge of the browser. Using offsetLeft and offsetTop only gets me it's position in reference to it's parent, and object.style.left and object.style.top yielded me empty values, although using object.style.left = 200px indeed moved my object 200px to the left. parseInt(object.style.left) and parseInt(object.style.left) gave me NaN in both cases. I'm not finding much else by googling, so I decided to ask here. Anything else I can do to try to get the absolute positioning coordinates? By the way, the element in question has been absolutely positioned, and to calm anyone's curiosity on why this is important, the element gets moved around and I need to keep track of it's position.

[chibineku]

Have you tried using clientX and clientY to determine the position of the top left corner? That ought to work.

[shadowayex]

That's a good idea, and I event used that to find my mouse coordinates, but it's giving me undefined. Is there something I need to do to actually get a value from it?

[chibineku]

I used it, minus the offsetLeft and Top values of a container element, to add values to an array of X and Y coordinates. If you want to do any math with them, you need to parseInt them (well, mine didn't work until I did that anyway). Simplified, it might look like this:

function getCoords(event) {x = event.clientXy = event.clientY//whatever you want to do with them here}...<img src="imagepath" onclick="getCoords(event)" />

[shadowayex]

Doing that I just get the coordinates of the mouse. I have something like that already. It looks like so:

		<script type="text/javascript">			function mouseCoords(e)			{				var xposition = document.getElementById("moveme").clientX;				var yposition = document.getElementById("moveme").clientY;				document.getElementById("coords").innerHTML = "Paragraph: " + xposition + ", " + yposition + "<br />";				document.getElementById("coords").innerHTML += "Mouse: " + e.clientX + ", " + e.clientY;			}		</script>

And if it matters, this is the HTML:

		<div id="field" onmousedown="mouseCoords(event);">			<p id="moveme">This is a paragraph</p>		</div>		<p id="coords"></p>

It gets the coordinates of the mouse nicely. I need the coordinates of the upper left hand corner of the paragraph with the id moveme.

[chibineku]

Hm, that is odd. It returns undefined,undefined for me too. How many ancestor elements will the paragraph (or other element you want to find the position of) have, realistically? You can create a loop that cycles through the parents (or children) until you reach the level of the client, adding up the offsets, which do return values for the paragraph element.