How to create Top positioning icon using jQuery Mobile ?

How to get the Position of mouse pointer in jQuery ?

Last Updated : 31 Mar, 2021

In this article, we will see how to get the position of the mouse pointer using jQuery. To get the position of mouse pointer, event.pageX, and event.pageY property is used. The event.pageX property is used to find the position of the mouse pointer relative to the left edge of the document. The event.pageY property is used to find the position of the mouse pointer relative to the top edge of the document.

Syntax:

event.pageX
event.pageY

Here, we use on() method to attach one or more event handlers for the selected elements and the text() method to set or return the text content of the element

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to get the Position of 
        mouse pointer in jQuery? 
    </title> 
  
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script> 
        $(document).ready(function () { 
            $(document).on("mousemove", function (event) { 
                $("#GFG").text("Mouse Position ("  
                + event.pageX + ", " + event.pageY + ")"); 
            }); 
        }); 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h3> 
        How to get the Position of 
        mouse pointer in jQuery? 
    </h3> 
  
    <div id="GFG"></div> 
</body> 
  
</html>

Output:

How to create Top positioning icon using jQuery Mobile ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to run a code on mouseenter event in jQuery ?

In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen

How do you get the length of a string in JQuery?

The task is to get the length of a string with the help of JQuery. We can find the length of the string by the jQuery .length property. The length property contains the number of elements in the jQuery object. Thus it can be used to get or find out the number of characters in a string. Syntax: $(sel

How to create Top positioning icon using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Top positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€styles

How to create Left positioning icon using jQuery Mobile ?

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Left positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="styl

How to get text value of a selected option in jQuery ?

Introduction: In this article, we will see how we can use jQuery to get the text value from the selected option. While working on some form-related user interface, we often use the select option, and to use that, we will surely need those values that are being selected. Approach: We will use select

How to make Right positioning icon using jQuery Mobile ?

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making Right positioning icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="sty

How to move mouse pointer to a specific position using JavaScript ?

In this article, we will learn how to move the mouse pointer to any specific position in the web browser using JavaScript. Before we start, you need to know that it's not actually possible to move the mouse pointer to a position using JavaScript, such functionality can be easily misused, but we can

How to make a Icon position Checkbox using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating an Icon position Checkbox using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€styles

How to create a Position popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a position popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to get value of textbox in jQuery ?

The purpose of this article is to demonstrate how we can get the value of textbox using jQuery. A basic understanding of HTML, CSS, and jQuery is required. This can be done by using the jQuery val() method. val() Method: This method is used to set or return the value of the attribute for the selecte