By Sam Deering

jQuery get coordinates of element

By Sam Deering

jQuery function to get coordinates of element.


The jQuery methods

.position() method allows us to retrieve the current position of an element relative to the offset parent

var pos = $('#wrapper').position();
//output: left: 0, top: 20

.offset(), which retrieves the current position relative to the document.

var offset = $('#wrapper').offset();
//output: left: 70, top: 40

Into coordinates:

var elem = $("#wrapper");
var x = $("#wrapper").offset().left;
var y = $("#wrapper").offset().top;
console.log('x: ' + x + ' y: ' + y);
//output: x: 70 y: 40

jQuery getCoord() function

jQuery.fn.getCoord = function()
  var elem = $(this);
  var x = elem.offset().left;
  var y = elem.offset().top;
  console.log('x: ' + x + ' y: ' + y);
  //output: x: 70 y: 40

  return {
      "x" : x,
      "y" : y

  //note that it is not efficient as it breaks the jQuery chain
  //return elem;

//output: Object { x=70, y=40 }
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account