In my previous tutorials, I’d explained how to send test mail using gmail smtp settings, how to export gridview selected rows to word excel text and pdf, how to send html web page as email and other more cracking tutorials on Asp.net, JavaScript, jQuery here.
Now here in this tutorial, I’ll explain how to get the current position of the mouse cursor in javascript or jquery with few examples.
I’ll also cover the points about how to get current co-ordinates location of the window screen, xAxis, yAxis and position of the parent as well as child element on the button click event.
To get start, first we need to add reference of jQuery in head section.
Following are the various sample code-snippets to get cursor current position.
Get Cursor Current Position on Button Click Event
//Get current cursor position
$(document).on("click", "#btnGetCurrentOffset", function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Parent Element Position
//Get parent elements position from cursor position clicked
$(document).on("click", "#btnGetParentOffset", function (e) {
//Getting parent element offset
var parentOffset = $(this).parent().offset();
//now minus parent element offset instead current element
var xOffset = e.pageX – parentOffset.left;
var yOffset = e.pageY – parentOffset.top;
$("#lblParentOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Child Element Position
//Get child elements position from cursor position clicked
$(document).on("click", "#btnGetChildOffset", function (e) {
//Getting child element offset
var currOffset = $(this).offset();
var parentOffset = $(this).parent().offset();
//now minus child element offset instead current element
var xOffset = currOffset.left – parentOffset.left;
var yOffset = currOffset.top – parentOffset.top;
$("#lblChildOffset").text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
Get Cursor Current Position on Mousemove
//Get the cursor position depending on cursor movement
$(document).mousemove(function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentPointerPosition").text("xOffset is " + xOffset + " and " + "yOffset is " + yOffset + "");
});
</script>
HTML Markup – [.aspx]
Following is the complete HTML Markup code for .aspx page that I used for the demonstration:
<head>
<title>Get mouse cursor current position examples</title>
<style type="text/css">
button
{
width: 200px;
height: 27px;
}
table tr td
{
width: 250px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
//Get current cursor position
$(document).on("click", "#btnGetCurrentOffset", function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentOffset").
text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get parent elements position from cursor position clicked
$(document).on("click", "#btnGetParentOffset", function (e) {
//Getting parent element offset
var parentOffset = $(this).parent().offset();
//now minus parent element offset instead current element
var xOffset = e.pageX – parentOffset.left;
var yOffset = e.pageY – parentOffset.top;
$("#lblParentOffset").
text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get child elements position from cursor position clicked
$(document).on("click", "#btnGetChildOffset", function (e) {
//Getting child element offset
var currOffset = $(this).offset();
var parentOffset = $(this).parent().offset();
//now minus child element offset instead current element
var xOffset = currOffset.left – parentOffset.left;
var yOffset = currOffset.top – parentOffset.top;
$("#lblChildOffset").
text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
//Get the cursor position depending on cursor movement
$(document).mousemove(function (e) {
var xOffset = e.pageX;
var yOffset = e.pageY;
$("#lblCurrentPointerPosition").
text("xOffset is " + xOffset + "px and " + "yOffset is " + yOffset + "px");
});
</script>
</head>
<body>
<br /><br />
<table>
<tr>
<td><button id="btnGetCurrentOffset">Get My Current Position</button></td>
<td><label id="lblCurrentOffset" /></td>
</tr>
<tr>
<td><button id="btnGetParentOffset">Get My Parent Position</button></td>
<td><label id="lblParentOffset" /></td>
</tr>
<tr>
<td><button id="btnGetChildOffset">Get My Child Position</button>
<div></div>
</td>
<td><label id="lblChildOffset" /></td>
</tr>
<tr>
<td>Current cursor pointer position is:</td>
<td><label id="lblCurrentPointerPosition" /></td>
</tr>
</table>
</body>
</html>
Example Result
