Getting X and Y coordinates for a div element

Question

I am trying to create javascript to get the X and Y coordinates of a div element. After some attempts, I came up with some numbers, but I'm not sure how to check their exact location (the script returns X as 168 and Y as 258). I am running a script using a screen resolution of 1280 x 800. This script I use to get this result:

 function get_x(div) { var getY; var element = document.getElementById("" + div).offsetHeight; var get_center_screen = screen.width / 2; document.getElementById("span_x").innerHTML = element; return getX; } function get_y(div) { var getY; var element = document.getElementById("" + div).offsetWidth; var get_center_screen = screen.height / 2; document.getElementById("span_y").innerHTML = element; return getY; }​ 

Now the question. Would it be reasonable to assume that these are the exact coordinates returned by the function, or is it just to just create a little something in this place to see what exactly is happening?

And finally, how can I do this div element? I know that I have to use the mousedown event handler and for a while to keep moving the element, but yes, any tips / hints are much appreciated, my biggest problem is how to get this while the loop is running.

Answer 1

Here is an easy way to get various html element position information:

  var my_div = document.getElementById('my_div_id'); var box = { left: 0, top: 0 }; try { box = my_div.getBoundingClientRect(); } catch(e) {} var doc = document, docElem = doc.documentElement, body = document.body, win = window, clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop, scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft, top = box.top + scrollTop - clientTop, left = box.left + scrollLeft - clientLeft; 

Answer 2

The easiest way to get the absolute screen position of an element is getBoundingClientRect .

 var element = document.getElementById('some-id'); var position = element.getBoundingClientRect(); var x = position.left; var y = position.top; // Et voilà! 

Keep in mind that coordinates do not include document scroll offset .

Answer 3

You also need to find the position using the parent position. Here is a very good tutorial: http://www.quirksmode.org/js/findpos.html

Answer 4

I think you could use jQuery.offset () http://api.jquery.com/offset/

Answer 5

Hey, I don’t know if anyone is reading all these answers, but I had the same problem as with the while loop. Try the onDrag event, it works great!

Answer 6

Given an element ...

 <div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div> 

If the element is in the main document , you can get the DIV coordinates with ...

  var X=window.getComputedStyle(abc,null).getPropertyValue('left'); var Y=window.getComputedStyle(abc,null).getPropertyValue('top'); 

If the element is in an iframe , you can get the DIV coordinates with ...

  var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left'); var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top'); 

NB: the return values ​​must be in the format "190px" and "350px".