Get x and y coordinate in HTML5

Question

I have section and article for displaying contents. My code is:

<section id = "examples">

 <article id="item_1">
    ...
 </article>

 <article id="item_2">
  ...
 </article>

 <article id="item_3">
    ...
 </article>

 <article id="item_4">
  ...
 </article>

 ...

</section>

How can I get the x and y co-ordinates of all the articles?

Is JQuery acceptable? – Jacek Kowalewski Jan 23 '14 at 16:50 — Jacek Kowalewski, Jan 23 '14 at 16:50
@Jacek It was tagged with jQuery ;) – user247702 Jan 23 '14 at 16:51 — user247702, Jan 23 '14 at 16:51
Ahahaha, thx :). Sorry for missing that point :). – Jacek Kowalewski Jan 23 '14 at 16:55 — Jacek Kowalewski, Jan 23 '14 at 16:55

Mateusz Nowak · Answer 1 · 2014-01-23T17:02:15.460

Easy to do with jQuery

$('article').each(function() {
    var element = $(this);
    var position = element.position();
    console.log( "left: " + position.left + ", top: " + position.top );
}

you can use instead pure js as @koningdavid pointed out in the same way

var elements = document.getElementsByTagName('article');
for(var i = 0; i < elements.length; i++)
{
    var element = elements[i].getBoundingClientRect();
    console.log( "left: " + element.left + ", top: " + element.top );
}

Live: http://jsfiddle.net/HMHbE/1/

score 2 · Answer 2 · answered Jan 23 '14 at 16:53

Pure Javascript method

document.querySelector('#item_1').getBoundingClientRect() // for example for #item_1

element.getBoundingClientRect

The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.

The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.

https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

You still need to loop through the articles. – Alvaro Jan 23 '14 at 17:10 — Alvaro, Jan 23 '14 at 17:10

score 1 · Accepted Answer · answered Jan 23 '14 at 16:51

You could do it with jQuery using position or offset:

$('article').each(function(){
     var position = $(this).position();
     console.log("top: " + position.top + " left: " + position.left);
});

LIVING DEMO

Take into account that position is relative to the document and offset calculates the coordinates relative to the parent offset element.

score 1 · Answer 4 · answered Jan 23 '14 at 16:52

1

I would try this in javascript:

// element is each article
// then you can use element.top and element.left for the x and y
var element = document.getElementById('Item_1');
var ele = element.getBoundingClientRect();:

answered Jan 23 '14 at 16:52

Alec Moore

1,155
2
10
20

score 0 · Answer 5 · answered Jan 23 '14 at 17:22

You can use getBoundingClientRect() javascript function

 var div = document.getElementById("item_1");
 var position = div.getBoundingClientRect();
 alert("Coordinates: " + position.left + "px," + position.right+"px,"+ position.top + "px," + position.bottom + "px" );

Get x and y coordinate in HTML5

5 Answers5