jQuery .offset() gets and sets the current coordinates of the first element
Syntax and Description for .offset() getter
.offset() (getter)
gets the current coordinates of the first element in the set of matched elements relative to the document.
Its return value is an object containing the properties top and left.
.offset() retrieves the current
position of an element relative to the document.
.position() retrieves the current
position relative to the offset parent.
The following code gets the offset of last b tag.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w . ja v a 2s. c om-->
var b = $("b:last");
var offset = b.offset();
alert(offset.left);
alert(offset.top);
});
</script>
</head>
<body>
<body>
<b>Hello java2s.com java2s.com</b>
</body>
</html>
Offset from an event
The following code prints out offset from an event.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w. ja va2 s. c o m-->
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
alert(this.tagName +
" coords ( " +
offset.left +
", " +
offset.top + " )");
});
});
</script>
</head>
<body>
<body>
<b>Hello java2s.com java2s.com</b>
</body>
</html>
Syntax and Description for .offset() setter
.offset(coordinates) setter
sets the current coordinates of the first element
in the set of matched elements relative to the document.
coordinates is an object containing the top and left properties.
Return value is the jQuery object, for chaining purposes.
.offset() setter method moves an element to new position.
The element's position is specified relative to the document.
The following code gets the offset of a div with an id of "box", and displays the left and top properties with an alert box:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {<!-- w w w.j a v a2s. c om-->
position: absolute;
left: 10px;
top: 50px;
width: 20px;
height: 20px;
background-color: green;
}
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("div#box").click(function() {
var pos = $(this).offset();
$("#watcher").text(pos.top + ":" + pos.left);
});
});
</script>
</head>
<body>
<p>
Where is the box? <span id="watcher">java2s.com</span>
</p>
<div id="box"></div>
</body>
</html>
Reposition an element
We can use .offset() setter to reposition an element.
$(selector).offset(coordinatesObject);
where coordinatesObject is any object that contains a top and left property set to integer values. For example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {<!-- w ww.j a v a 2 s . c om-->
position: absolute;
left: 10px;
top: 50px;
width: 20px;
height: 20px;
background-color: green;
}
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("div#box").click(function() {
var pos = $(this).offset({
top:100,
left:100
});
$("#watcher").text(pos.top + ":" + pos.left);
});
});
</script>
</head>
<body>
<p>
Where is the box? <span id="watcher"></span>
</p>
<div id="box"></div>
</body>
</html>