Skip to content
3 examples of jQuery offset method with top and left
In This Tutorial
They offset method of jQuery
The jQuery offset method is used to get the position or coordinates of the given element. The offset method is also used to set the coordinates of all matched elements. The coordinates are relative to the document while the values are in pixels.
An example of offset method
If you require to get or set coordinates according to offset parent then use jQuery $.position method.
Note that, if there are more than one matched elements found to get coordinates, the offset method will return only first matched element coordinates.
If you are setting coordinates by using offset method, then it will set coordinates for all matched elements.
Following are a few examples to make it easier to understand, but let us first look at the syntax of offset method.
Syntax of jQuery offset()
The basic syntax to get coordinates:
$(“element”).offset();
The syntax to set coordinates:
$(“element”).offset(coordinates);
See simple examples below to see how to use offset method.
Example of getting coordinates with offset jQuery method
The example below uses div element to return its coordinates by using offset method of jQuery.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
var offset = $(“div”).offset();
alert(“Top: “ + offset.top + “n” + ” Left: “ + offset.left);
});
});
</script>
</head>
<body>
<div id=“offsetdiv”>This is div element</div>
<button id=“offset”>Click to see coordinates of div</button>
</body>
</html>
|
Example of div with CSS style applied
This example uses the same div as above, with CSS applied that adds margin from top and left and then returns div coordinates as you click on the button.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
var offset = $(“div”).offset();
alert(“Top: “ + offset.top + “n” + ” Left: “ + offset.left);
});
});
</script>
<style>
div
{
margin-left:100px;
margin-top:20px;
}
</style>
</head>
<body>
<div id=“offsetdiv”>This is div element</div>
<button id=“offset”>Click to see coordinates of div</button>
</body>
</html>
|
Setting coordinates by offset method
The following example shows how to set coordinates by using offset method. As you click on the button to set coordinates, it will set top to 20px and left to 30px.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$( “#offsetdiv” ).offset({ top: 20, left: 50 });
});
});
</script>
</head>
<body>
<div id=“offsetdiv”>This is div element</div><br /><br />
<button id=“offset”>Click to set coordinates of div</button>
</body>
</html>
|
Further reading: jQuery position
Leave A Comment?