Using jQuery’s offset() method, we’ll show how to retrieve and display the current position (in pixels) of tag elements. This method is particularly useful when moving elements with animations.
Understanding the Position of Elements on a Web Page
When designing a website, you often need to know the precise position of specific elements. For instance, when animating elements in response to user actions. In such cases, jQuery’s offset() method makes it easy to get the current position (in pixels) of elements.
What is jQuery’s offset() Method?
The offset() method is used to retrieve the position of a specified element on the document. It returns an object with properties `top` (position from the top edge) and `left` (position from the left edge).
Preparing the CSS
First, prepare the CSS for the elements whose positions you want to retrieve. In this example, we will focus on an element with the class name `iti`.
<style type="text/css">
body {
font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
padding: 0;
margin: 0;
overflow-x: hidden;
line-height: 1.8em;
text-align: center;
}
h1 {
font-size: 16px;
text-align: center;
font-weight: normal;
padding: 10px 0;
position: relative;
}
.iti {
position: absolute;
width: 50px;
height: 50px;
background-color: #cccccc;
top: 100px;
left: 200px;
}
</style>
HTML Structure
Next, prepare the HTML structure for the element and display its position information. Define an element tag (class=”iti”) whose position will be retrieved.
<h1>Display the Current Position of the Gray Div Element (class="iti") in a p Tag</h1>
<p></p>
<div class="iti"></div>
Retrieving and Displaying Position with jQuery
Finally, use jQuery to retrieve the position of the element and display the information on the HTML page. Load the `jquery-2.2.0.min.js` file and use the offset() method to get the current position of the class=”iti” tag, displaying the position in the p tag.
<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var iti = $(".iti");
var offset = iti.offset();
$("p").html( "The position of the gray square is top:" + offset.top + "px, left:" + offset.left + "px.");
});
</script>
Demo Page: Displaying the Current Position (px) of Tag Elements
With this setup, you are ready to retrieve and display the current position of specific elements on your webpage. Experimenting with this code will help you dynamically determine element positions and take the first step toward creating a more interactive webpage.
Demo: Display Current Position (px) of Tag Elements
Summary
In this article, we explained how to use jQuery’s offset() method to retrieve and display the current position of elements on a webpage. Mastering this fundamental technique allows you to incorporate more complex animations and interactive elements into your website. Keep learning and applying your programming knowledge to tackle even more challenges.
* If you reuse this code, do so at your own risk.
**Do not reuse the Google Analytics tag in the head tag.**
