jQuery mousemove (cursor "overview") wrong calculation

Question

I'm trying to create a document/cursor "map-overview", however i stuck at the calculation. The pointer still exceeds the overview box.

Here's what I've done so far:

var box = $('#box'),
    pointer = box.find('i');

$(window).on('mousemove', function(e) {

    var pageX = e.clientX,
        pageY = e.clientY,
        winW = $(this).width(),
        winH = $(this).height(),
        percentX = 100 * pageX / winW,
        percentY = 100 * pageY / winH;

    pointer.css({
        top: percentY + '%',
        left: percentX + '%'
    });

});

I know, it is not the best approach to use the percentage, but i dont know how to calculate the correct dimensions... Any suggestions to make it better?

Answer 1

The cursor will always overlap the border of your box because

a) it has a defined width > 1

b) you placed it to the bottom right of the actual position so it will overlap to the right and to the bottom and

c) you should set the overflow to hidden for the box.

See example: http://jsfiddle.net/8jJNV/7

EDIT: Adapted to the latest changes of the jsfiddle

CSS:

#box {
   position: fixed;
   bottom:0;
   left:0;
   width: 180px;
   height: 180px;
   background: #aaa;
   overflow: hidden;
}

jQuery:

$(window).on('mousemove', function(e) {

   var pageX = e.clientX;
   var pageY = e.clientY;
   var winW = $(this).width();
   var winH = $(this).height();

   if(pageX > winW-5) pageX = winW-5; // deal with scrollbar

   var boxWidth = 172;
   var boxHeight = 172;

   var posX = pageX / winW * boxWidth;
   var posY = pageY / winH * boxHeight;

   pointer.css({
      top: posY + 'px',
      left: posX + 'px'
   });

});