One of my colleagues recently asked me the right way to find the position of an element on the page using jQuery. In my opinion the right way to this in jQuery is to use position() which fetches the top and left position of an element relative to its offset parent. Here’s an example of how to find the position of the Lower Div :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Find the position of an element in jQuery</title>
<script type='text/javascript'
src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
$(function() {
$("#para").append("Top: " + $('#Lower').position().top + "<br/>")
.append("Left: " + $('#Lower').position().left);
});
</script>
<style type="text/css">
div
{
border:solid 1px Silver;
background-color:Gray;
}
</style>
</head>
<body>
<div id="Upper">
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
upper upper upper upper upper upper upper upper upper upper upper upper
</div>
<br />
<div id="Lower">
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
lower lower lower lower lower lower lower lower lower lower lower lower
</div>
<p id="para" />
</body>
</html>
OUTPUT
Tweet
About The Author
6 comments:
This is a pointless example. You can check the jQ documentation for this.
I don't think this is a pointless. It was usefull for me and I'm thankfull.
=D
P.S.: This is not pointless because it came first in Google search.
Seriously, why do you have to be a d****e.
I'm not saying the first guy isn't being a douche - but I don't think claiming something as coming from a Google search gives anything any sort of merit.
Just sayin'
Whether this is pointless or not it is not 100% accurate.
I'm busy updating an old web application with a few iFrames in it and trying to find the absolute position of an element inside an iFrame is a huge headache!
.offset() & .position() only return the top and left co-ordinates within the iFrame and not the screen it is being displayed in, therefore it is not the absolute position!
Would it not be better to "cache" the position instead of getting it twice:
$(function() {
var p = $('#Lower').position();
$("#para").append("Top: " + p.top + "
").append("Left: " + p.left);
});
If you want to see positioning of an element in action take a look at this fiddle: http://jsfiddle.net/SF8LN/19
Post a Comment