JQuery Position() and Offset() Example

JQuery Position() Method

The position() method helps in returning position of selected element in the document. It retrieves position of the element relative to the offset parent. It has two types of object properties which represents top and left positions in pixels. This method is useful when positioning an element near another element or within same element. This method works only with visible elements; it does not support positioning hidden elements.

JQuery Position() Syntax

$(selector).position();

JQuery Position() Example

<!doctype html>
<head>
<title>JQuery Position Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Position Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       page_pos=$("h3").position();
         $("#message").text(" Top Position: " + page_pos.top + " Left Position: " + page_pos.left);
     });
   });
</script>
<body>
   <h3>Welcome to JQuery!!!</h3>
   <button>Click to see position of the element</button>
   <p id="message"></p>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“button”).click(function()) line defines click event which occurs when button is clicked.
  • page_pos=$(“h3″).position(); line defines position method which returns position of the current element in the document. We are storing the value of element into page_pos variable.
  • $(“#message”).text(” Top Position: ” + page_pos.top + ” Left Position: ” + page_pos.left); line displays the top and left position of the specified element when user clicks the button on the browser.

When you run the above example, you would get the following output:

Jquery Position Method

JQuery Offset() Method

The offset() method helps in returning relative position for the selected elements in pixels. It has two types of object properties which represents top and left positions in pixels. It allows retrieving offset coordinates of the first element in the set of matched elements relative to the document. It does not contain any arguments. Like position() method, this method also works only with visible elements; it does not support positioning hidden elements.

JQuery Offset() Syntax

$(selector).offset();

JQuery Offset() Example

<!doctype html>
<head>
<title>JQuery Offset Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Offset Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       offset_pos=$("h3").offset();
       $("#message").text(" Top : " + offset_pos.top + ", Left : " + offset_pos.left);
      });
   });
</script>
<body>
   <h3>Welcome to JavaBeat!!!</h3>
   <button>Click to see position of the element</button>
   <p id="message"></p>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“button”).click(function()) line defines click event which occurs when button is clicked.
  • offset_pos=$(“h3″).offset(); line defines offset() method which returns current offset for the selected elements in pixels.
  • $(“#message”).text(” Top : ” + offset_pos.top + “, Left : ” + offset_pos.left); line displays the top and left position of the specified element when user clicks the button on the browser.

When you run the above example, you would get the following output:

JQuery Offset Method

We can also set offset co-ordinates of an element. It has following syntax:

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

Example:

<!doctype html>
<head>
<title>JQuery Offset Method</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Offset Method Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
     $("button").click(function(){
       $("h3").offset({top:200,left:250});
      });
   });
</script>
<body>
   <h3>Welcome to JQuery!!!</h3>
   <button>Click to see position of the element</button>
</body>
</html>
 

As shown in the above example, we are setting the offset co-ordinates manually. When we click the button on the browser, we will get the Welcome to JQuery!!! line as specified in the offset co-ordinates.

When you run the above example for offset co-ordinates, you would get the following output:

OffsetMethod1

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*