event.pageX
and event.pageY
You can use the jQuery event.pageX
and event.pageY
in combination with the jQuery offset()
method to get the position of mouse pointer relative to an element.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Coordinates of Mouse Pointer</title>
<style>
#box{
width:400px;
height:300px;
background: #f2f2f2;
border: 1px solid #000;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$("#box").mousemove(function(event){
var relX = event.pageX - $(this).offset().left;
var relY = event.pageY - $(this).offset().top;
var relBoxCoords = "(" + relX + "," + relY + ")";
$(".mouse-cords").text(relBoxCoords);
});
});
</script>
</head>
<body>
<div id="box"></div>
<p>Coordinates of mouse pointer with respect to the DIV box are: <strong class="mouse-cords"></strong></p>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com
How to get Current User Location in Laravel 7
In this tutorial, i am going to show you...How to add attributes to an HTML element in jQuery
Use the jQuery attr() method You can...How to Get the ID of an Element using jQuery
Use the jQuery attr() Method...What is new in Laravel 8?
Hello artisan, I have some good news...Restful API In Laravel 5.5 Using jwt Authentication
Today, we are share with you how to buil...