jQuery Find (Absolute) Position Of Element Using Offset Examples
Have you ever wanted to find absolute position of element using jQuery? In this article, I am going to show you how you can easily find position of a div or an element using jQuery very easily, with an example.
Examples to Find position of element using jQuery
In order to find position of element in a web page using jQuery, let’s assume that we have a div in our page with ID “my_div” and we would like to find position of this div on the page when a button is clicked. Here is the source code of the example:
<html>
<head>
<title>Find element position using jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="my_div">This is my div content</div>
<input type="submit" name="show_position" id="show_position" value="Show DIV position" />
<script type="text/javascript">
$(document).ready(function() {
$('#show_position').click(function(){
var offset = $("#my_div").offset();
alert( "Top: " + offset.top + ", " +
"Left: " + offset.left
);
});
});
</script>
</body>
</html>When you run the above code, it looks like below:
If you click on the “Show DIV position” button. You will notice that it gives us the following values:
Top: 8, Left: 8
Does that pop a question in your mind? Do you think the values shown are correct? They could be wrong unless you understand what exactly is happening. So right now, you might be thinking that the DIV is the only element that appears first in the page and it’s position should be Top:0, Left:0. But that’s not the case! Do you know why? Take a guess! Well, if you can’t, here’s why:
If you have noticed the source code, you will notice that the page is very simple & raw i.e. there are no CSS styles applied. By default in a raw page, a browser intercepts default values for the body and thus different browsers show different values for this. In order to make it consistent across browsers, you will need to make sure that you reset the CSS styles for a web page and then try to find the absolute position of an element. That said, the revised source code to find position of div “correctly” in the page is as follows:
<html>
<head>
<title>Find element position using jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="my_div">This is my div content</div>
<input type="submit" name="show_position" id="show_position" value="Show DIV position" />
<script type="text/javascript">
$(document).ready(function() {
$('#show_position').click(function(){
var offset = $("#my_div").offset();
alert( "Top: " + offset.top + ", " +
"Left: " + offset.left
);
});
});
</script>
</body>
</html>In the above code, I have reset the padding & margin for the body tag. If you now run the above code & click the button you will notice that it correctly finds position of the div as Top: 0, Left: 0.
Your Turn!
So this is how you can find absolute position of element using offset method in jQuery. Do you know any other ways? Feel free to share by commenting below.