jqueryhtmlpopupmousemovemouse-coordinates

Show mouse coordinates in popup div using jquery, following the mouse move


I need to be able to check various elements positions inside a html page. For this I want a div that shows the mouse coordinates as a popup close to the mouse cursor.


Solution

  • <html>
    <head>
    <title>Mouse positioning in jQuery</title>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <style>
    #click{
        background-color:#efefef;
        width:300px;
        height:50px;
        text-align:center;
        font:1.2em Arial;
        line-height:50px;
        display:none;
        position:absolute;
        z-index:9999;
    }
    </style>
    <script>
    $(document).ready(function(){
        //$(document).click(function(e){ // for click action
        $(document).mousemove(function(e){
            // e.pageX - gives you X position
            // e.pageY - gives you Y position
            //$('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY);
            $("#click").css({left:(e.pageX+20) + "px", top:(e.pageY+20) + "px"});
            $('#click').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY);
            $('#click').show();
            //$('#click').slideToggle(); // for toggle show/hide popup
        });
    });
    </script>
    </head>
    <body>
    On mouse move...
    
    <div id="click">The cursor position will show in this div.</div>
    
    </body>
    </html>