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

 
 

Share on Google+Share on Google+
The 'offset' method of jQuery to find the co-ordinate
Posted on: August 9, 2010 at 12:00 AM
Advertisement
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

Advertisement

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


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.

Posted on: August 9, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com