relative & absolute pointer position

by Juan Lanus

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="it"></div>

<div id="log"></div>
<div id="xy"></div>

CSS

#it { background-color: #eef; }  
  body { padding: 20px; }
  #it { width:400px; height:333px; }

JavaScript

var $it = $( "#it" );
$it.on("mousemove", function(event) {
  var itX = $it.offset().left;
  var itY = $it.offset().top;
  $( '#xy' ).text( 
    'x:' + itX + 
    ' y:' + itY + 
    ' w:' + $it.width() 
  );
  $( "#log" ).text(
    'x: ' + ( event.pageX - itX ) + 
    ' y: ' + (event.pageY - itY) 
  );
});