Share on Google+Share on Google+

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

Ads
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

Advertisements

Ads

Posted on: August 9, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement