CODEWITHSUNDEEP
javascript
Muthu
Muthu

Reputation: 1

Detecting Mouse position in Firefox in javascript

I'm trying to detect mouse position inside the element through on mouse move event but it does not work in Firefox.

function mouseover_imageChange(imgid,imgArr) {
    var x= event.pageX- jQuery("#"+imgid).offset().left;
    var y= event.pageY- jQuery("#"+imgid).offset().top;
}

Any idea on how to make it work in all browsers, along with the parameters that are needed to be passed to the function?

Thanks, Muhtu

Upvotes: 0

Views: 968

Answers (2)

Giancarlo Colfer
Giancarlo Colfer

Reputation: 559

@Muthu

Here is a working demo of "getting X and Y coordinates of the mouse in the viewport" http://jsfiddle.net/XsqBz/

And please find below the complete source. Enjoy.

<!doctype html> 
<html lang="en">
<head> 
<title>jQuery: Getting X and Y coordinates of the mouse in the viewport</title> 
<style> 
html{background:#f9f9f9;background-color:#f9f9f9;} 

body{background:#fff;background-color:#fff;color:#666;font-family:"Lucida Grande",Verdana,Arial,Georgia,"Bitstream Vera Sans","Bitstream Charter",sans-serif,serif;margin:2em auto;width:700px;padding:1em 2em;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;border:1px solid #dfdfdf;} 

body{ 
font-size:11px; 
line-height:15px; 
background:#fff;
background-color:#fff; 
color:#666; 
margin-left:20px; 
} 

strong{font-size:12px;}
a:link{color:#0066CC;}
a:hover{color:#FF6600;}
a:visited{color:#003366;}
a:active{color:#9DCC00;} 

p{font-size:18px;} 

.relativeX, .relativeY{color:#666;font-size:13pt;} 
.relativeX{font-size:48pt;color:#fc0;position:relative;top:-20px;left:30px;} 
.relativeY{font-size:52pt;position:relative;top:-09px;left:-10px;} 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head> 
<body> 
<!-- Move mouse over div to get position --> 
<div style="margin:10px;height:400px;width:90%;min-width:420px;background:#ccc;padding:20px;border:1px dotted #777;display:block;"> 
  relative to this 
</div>  
<script> 
(function($) { 
$(document).bind('contextmenu', function(){ 
  return false; 
}); 

  $('div').mousemove(function(e){ 
    // Relative to this div element instead of document 
    var relativeX = e.pageX - this.offsetLeft; 
    var relativeY = e.pageY - this.offsetTop;
    $(this).html('releativeX = <span class="relativeX">' + relativeX + '</span>, releativeY = <span class="relativeY">' + relativeY + '</span>'); 
  }); 
})(jQuery); 
</script>
</body> 
</html>

Upvotes: 0

pete
pete

Reputation: 25091

Since you appear to be using jQuery, why not use something like this?

$(document).ready(function () {
    var startImgTracker = function (e) {
        $(this).mousemove(function (e) {
            console.log(JSON.stringify({
                "x": e.pageX,
                "y": e.pageY,
                "relativeX": e.pageX - $(this).offset().left,
                "relativeY": e.pageY - $(this).offset().top
            }));
        });
    };
    var stopImgTracker = function (e) {
        $(this).unbind('mousemove');
    };
    $('img').hover(startImgTracker, stopImgTracker);
});

Use the hover event to trigger a mousemove handler (which is what you appear to want) and the "stop"hover event to unbind the mousemove. Make sure to include an event argument to get the current pageX and pageY.

This should work in any browser that will run jQuery.

Upvotes: 1

Related Questions