Get Cursor Location in jQuery

Introduction

In this article, I explain how to get the cursor's location in jQuery.

First we download the file and then add it in our project; see:

Jquery-1.8.2.js

Use the following procedure.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Web Site...". A window is opened. In this window, click "Empty Web Site" under Visual C#.

Give the name of your application as "Cursor_Location" and then click "Ok". Then add "HTML page" and write the following code.

Program Coding

Cursor_Location.htm

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="jquery-1.8.2.js"></script>

  <script type="text/javascript">

      $(function ()

      {

          $(document).mousemove(function (e)

          {

             $('#lblXAxis').html("Cursor X Axis: "+e.pageX+"<br>")           

         })

     })

      $(function ()

      {

          $(document).mousemove(function (e1)

          {

             $('#lblYAxis').html("Cursor Y Axis: "+e1.pageY)           

         })

     })

</script>

</head>

<body>

<form id="form1" runat="server">

    <h3 style="color: #0000FF; font-size: x-large">Cursor Location in Jquery</h3>

    <input id="Button1" type="button" value="Mouseover for Get Cursor Location" />

    <br />

    <br />

<div>

<label id="lblXAxis" style="font-weight: bold; font-size: large" />

</div>

     <label id="lblYAxis" style="font-weight: bold; font-size: large" />

</form>

</body>

</html>


Output

 

output.jpg


For more information, download the attached sample application.

Up Next
    Ebook Download
    View all
    Learn
    View all