25
Aug
2012

Find mouse position using jQuery

Posted in: jQuery No Comments

jquery_logo
Simple jQuery tutorial to find and display the mouse cursor position. Top left corner is considered as origin (0,0)

Step 1:
Create a DIV region to display the mouse position. I am using DIV ID #position

<div id="position"></div>

Step 2:
Call jQuery library. I am using Google CDN hosted jQuery library.
You can use alternative method to include jQuery library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3:
Following jQuery code will show the mouse position.

<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$('#position').html("<strong>X - Axis Position :</strong>" + e.pageX + "<br /> <strong>Y - Axis Position :</strong>" + e.pageY);
});
});
</script>

Done!!
Check Demo and Download


About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply