jQuery Get / Find DIV position Examples
If you have been trying to get Div position using jQuery or find Div position using jQuery, then this article is for you. In this article, I am going to show you with easy to follow examples how to easily get/find the position of a div with respect to the page. You can apply the same code to find the position of any other element of the page. Read on to find out more.
How to Get DIV position / Find DIV position
For the sake of the example, let’s assume that we have a div with the ID “my_div” and we want to get position of this div when a button is clicked. The code to find the div position is really small, so you will be able to follow very easily. Also I am going to specify two ways to get div position.
- The first way is to alert the div position when a button is clicked.
- The second way is to write the div’s position in another div bearing the ID “div_position”.
Examples to Get/Find DIV position using jQuery
Here is the full source code (HTML + jQuery):
<html>
<head>
<title>jQuery Find / Get DIV position</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="my_div">This is my existing div.</div>
<input type="submit" name="sbt_add" id="sbt_add" value="Get / Find Div Position">
<div id="div_position"></div>
<script type="text/javascript">
$('#sbt_add').on("click", function(){
var position = $("#my_div").offset();
//Alert Div position using jQuery
alert( "Top: " + position.top + ", " + "Left: " + position.left );
//Write Div position to another Div using jQuery
$('#div_position').html( "Top: " + position.top + ", " + "Left: " + position.left );
});
</script>
</body>
</html>When you run the above code, you will see that the div positions are found and alerted and then written to another div. So far it’s been very simple, correct? Although the above procedure is correct, there is a caveat associated with it. I have written another article that explains in depth about this and also provided a solution. To read the article and to get a hold of the solution, visit: jQuery Find Position | Find absolute position of element using offset
Your Turn!
Do you know of any other ways to find / get div position using jQuery? Feel free to share by commenting below.