The 'offset' method of jQuery to find the co-ordinate

Home Tutorial Jquery The 'offset' method of jQuery to find the co-ordinate

The 'offset' method of jQuery to find the co-ordinate
Posted on: August 9, 2010 at 12:00 AM

In this tutorial , we will discuss about 'offset' method of jQuery .

The 'offset' method of jQuery to find the co-ordinate

In this tutorial , we will discuss about 'offset' method of jQuery . This method is used to find the coordinate of the clicked html element. In this example we also display which element is clicked by using "this.tagname".

offset.html

<!DOCTYPE html>
<html>
<head>
<style>
p { margin-left:10px; color:blue; width:200px;
cursor:pointer; }
span { color:red; cursor:pointer; }
div.abs { width:50px; height:50px; position:absolute;
left:220px; top:35px; background-color:green;
cursor:pointer; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<div id="result">Click an element.</div>
<p>
This is the best way to <span>find</span> an offset.
</p>

<div class="abs">
</div>

<script>
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
$("#result").text(this.tagName + " coords ( " + offset.left + ", " +
offset.top + " )");
});

</script>
</body>
</html>

OUTPUT

When we click on box :

When we click on text line it will display :

Download Source Code

Click here to see demo

Related Tags for The 'offset' method of jQuery to find the co-ordinate:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics