Response title
This is preview!
Mouse Position Relative to div rather than page.
in Using jQuery
•
11 years ago
I am trying to get the position of the mouse in relation to a div rather than to the page. Meaning when in the top left corner of the div the coordinates would be (0,0). It needs to work no matter what size the browser window so I can't use pageX/pageY. Does anyone know how to do this? I've been messing around with the sample code before trying to use it on the real page. Trying to get the top left corner of the div to be coordinates (0,0)
<!DOCTYPE html>
<html>
<head>
<style>
div { width:220px; height:170px; margin: 10px 50px 10px 10px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);
});
</script>
</body>
</html>
1