jQuery offset()

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

jQuery offset()

The jQuery offset() method is used to get the current offset of the first matched element.

It provides two methods: to set or return the offset co-ordinates for the selected elements, relative to the document.

  • To return the offset: When this method is used to return the offset, it returns the offset co-ordinates of the FIRST matched element. It specifies the object's two properties: the top and left positions in pixels.
  • To set the offset: When this method is used to set the offset, it sets the offset co-ordinates of ALL matched elements.

Syntax:

To RETURN the offset co-ordinates:

  1. $(selector).offset()   

To SET the offset co-ordinates:

  1. $(selector).offset({top:value,left:value})   

To SET offset co-ordinates using a function:

  1. $(selector).offset(function(index,currentoffset))   

Parameters of jQuery offset method

Parameter Description
{top:value,left:value} It is a mandatory parameter while setting the offset. It specifies the top and left co-ordinates in pixels.
Function (index,currentoffset): It is an optional parameter. It specifies a function that returns an object containing the top and left coordinates.
  • Index: It returns the index position of the element in the set.
  • Currentoffset:It returns the current coordinates of the selected element.

Example of jQuery offset() method

Let's take an example to demonstrate the jQuery offset() method.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  5. <script>  
  6. $(document).ready(function(){  
  7.     $("button").click(function(){  
  8.         var x = $("p").offset();  
  9.         alert("Top: " + x.top + " Left: " + x.left);  
  10.     });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15. <p>You are reading this tutorial on javatpoint.com</p>  
  16. <button>Click here to return the offset coordinates of the p element</button>  
  17. </body>  
  18. </html>  

Test it Now

jQuery offset() example 2

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>The jQuery Example</title>  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
  6. <script type="text/javascript" language="javascript">  
  7. $(document).ready(function() {  
  8. $("div").click(function () {  
  9. var offset = $(this).offset();  
  10. $("#lresult").html("left offset: <span>" + offset.left + "</span>.");  
  11. $("#tresult").html("top offset: <span>" + offset.top + "</span>.");  
  12. });  
  13. });  
  14. </script>  
  15. <style>  
  16. div { width:60px; height:60px; margin:5px; float:left;}  
  17. </style>  
  18. </head>  
  19. <body>  
  20. <p>Click on any square:</p>  
  21. <span id="lresult"> </span>  
  22. <span id="tresult"> </span>  
  23. <div  style="background-color:#7fffd4"></div>  
  24. <div  style="background-color:#a52a2a"></div>  
  25. <div  style="background-color:#7fff00"></div>  
  26. <div  style="background-color:#ff1493"></div>  
  27. </body>  
  28. </html>  

Test it Now