Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery event.pageX Property

Posted in jQuery Tutorial
Updated on May 15, 2024
By Mari Selvan
πŸ‘οΈ 30 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
jQuery event.pageX

Photo Credit to CodeToFun

πŸ™‹ Introduction

jQuery offers a wealth of properties and methods that streamline the process of handling events and manipulating the DOM. One such useful property is event.pageX, which provides the horizontal coordinate of the mouse pointer relative to the entire document when an event occurs. This property is invaluable for tasks that require precise mouse position tracking.

In this guide, we’ll explore the event.pageX property in detail, with practical examples to illustrate its usage.

🧠 Understanding event.pageX Property

The event.pageX property in jQuery returns the X (horizontal) coordinate of the mouse pointer relative to the top-left corner of the document when an event is triggered. This property is often used in mouse event handlers to determine the exact position of the mouse pointer.

πŸ’‘ Syntax

The syntax for the event.pageX property is straightforward:

syntax.js
Copied
Copy To Clipboard
event.pageX

πŸ“ Example

  1. Displaying Mouse Coordinates:

    One of the simplest uses of the event.pageX property is to display the mouse coordinates on the screen as the user moves the mouse. Here’s an example:

    index.html
    Copied
    Copy To Clipboard
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Mouse Coordinates</title>
        <style>
            #coordinates {
                position: fixed;
                top: 10px;
                left: 10px;
                padding: 5px;
                background-color: #f0f0f0;
                border: 1px solid #ccc;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="coordinates">Move the mouse!</div>
        <script>
            $(document).mousemove(function(event) {
                $("#coordinates").text("X: " + event.pageX);
            });
        </script>
    </body>
    </html>

    In this example, the mouse coordinates are displayed in a fixed position on the screen as the mouse moves.

  2. Tracking Mouse Movement Over an Element:

    You can also track mouse movement over a specific element. This is useful for creating interactive elements like custom tooltips or draggable items.

    index.html
    Copied
    Copy To Clipboard
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Track Mouse Movement</title>
        <style>
            #trackArea {
                width: 300px;
                height: 200px;
                border: 1px solid #000;
                margin: 20px;
                position: relative;
            }
            #tooltip {
                position: absolute;
                padding: 5px;
                background-color: #ffeb3b;
                border: 1px solid #000;
                display: none;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="trackArea">
            <div id="tooltip">Tooltip</div>
        </div>
        <script>
            $("#trackArea").mousemove(function(event) {
                var tooltip = $("#tooltip");
                tooltip.css({
                    top: event.pageY + 10 + "px",
                    left: event.pageX + 10 + "px"
                }).show();
            }).mouseout(function() {
                $("#tooltip").hide();
            });
        </script>
    </body>
    </html>

    In this example, a tooltip follows the mouse cursor as it moves over the #trackArea div.

  3. Implementing Clickable Areas:

    You can use event.pageX to determine where a click event occurred, which can be useful for interactive maps or image hotspots.

    index.html
    Copied
    Copy To Clipboard
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Clickable Areas</title>
        <style>
            #image {
                width: 500px;
                height: 300px;
                background-image: url('your-image.jpg');
                background-size: cover;
                position: relative;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>
        <div id="image"></div>
        <script>
            $("#image").click(function(event) {
                alert("Clicked at X: " + event.pageX + " Y: " + event.pageY);
            });
        </script>
    </body>
    </html>

    In this example, clicking anywhere on the image will display an alert with the exact coordinates of the click.

πŸŽ‰ Conclusion

The event.pageX property in jQuery is a powerful tool for capturing the horizontal mouse position relative to the document. Whether you're displaying mouse coordinates, creating interactive elements, or implementing clickable areas, understanding and using event.pageX effectively can enhance the interactivity and user experience of your web applications.

By mastering this property, you can create more engaging and responsive web interfaces.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy