.offset() JQ Home  <<  A & P  <<  .offset()

First element current coordinates retrieval and matched set current coordinates setting.

Description

The .offset() method is used to retrieve the current coordinates from the first element within the matched set relative to the document, or set the current coordinates within the matched set relative to the document.

  • Use the .position() method if you wish to retrieve the current coordinates relative to the offset parent, rather than relative to the document.
  • You cannot use the .offset() method on hidden elements and does not account for margins, padding or borders set on the body element.
  • When setting coordinates using the .offset() method and the element's position style property is currently set to static, it will be set to relative to allow for this repositioning.

Syntax

Signature Description
.offset() Retrieve the current coordinates from the first element within the matched set, relative to the document.
.offset( coordinates ) Set the current coordinates within the matched set, relative to the document.
.offset( function(index, coordinates )A function returning the coordinates to set.

Parameters

Parameter Description Type
coordinatesA plain JavScript object containing the properties top and left, which are integers indicating the top and left coordinates to set for the elements.PlainObject
function(index, coordinates)A function.
  • Each time the callback runs, it is passed the current index position of the element in the set.
  • The existing coordinates pertaining to the current element are also passed.
  • The callback is fired in the context of the current element in the set, so the keyword this refers to that element.
 Function

Return

Retrieving - An Object object containing the properties top and left.

Setting - A jQuery object including the updated properties within the matched set.

.offset() Example A & P  <<  Top

Retrieve the current coordinates from the first element within the matched set, relative to the document.

In the example below we alert the offset of the following image with the id of 'curry'.

a picture of curry


$(function(){
  $('#btn22').on('click', function() {
    alert('The offset coordinates of the of the above image are: ' 
           + JSON.stringify($('#curry').offset()) + '.'); 
  });
});

Press the button below to action the above code:

.offset( coordinates ) Example A & P  <<  Top

Set the current coordinates within the matched set, relative to the document.

In the example below we first get the offset of the image below with the id of 'curry2'. We then add 20 pixels to the 'top' and 'left' properties and reposition the images offset.

a picture of curry


$(function(){
  $('#btn23').one('click', function() {
    var coords = $('#curry2').offset();
    coords.top +=20;
    coords.left +=20;
    $('#curry2').offset(coords);
  });
});

Press the button below to action the above code:

.offset( function (index, coordinates) ) Example A & P  <<  Top

A function returning the coordinates to set.

In the example below when we press the button we change the offset of the image with an index of 1.

a picture of curry a picture of curry a picture of curry


$(function(){
  $('#btn24').on('click', function() {
    $('.content .curry').offset( function (index, coordinates) {
      if (index == 1) {
    	  coordinates.top +=20;
    	  coordinates.left +=20;
      }
      return $(this).offset(coordinates);
    });
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 11 - Working With Dimension & Position CSS Properties