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?

What exactly are you trying to accomplish? Seems very annoying trying to "catch" the menu item on the site. — CyclingFreak, Dec 18 '12 at 13:02
@JurgenStillaert As described I try to rebuild the following [page](http://www.chromazone-imaging.co.uk/flashindex.html) or rather parts of it... — yckart, Dec 18 '12 at 13:08

devnull69 · Accepted Answer · 2012-12-18T14:09:28.033

0

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'
   });

});

edited Dec 18 '12 at 14:09

answered Dec 18 '12 at 13:09

devnull69

16,402
8
50
61

yeah, your thoughts are correct, but it does not solve my problem :P The "pointer" still over/-underlaps the box: http://jsfiddle.net/8jJNV/3/show/ – yckart Dec 18 '12 at 13:12
You could only avoid that by "tweaking" the actual screen into a virtual one, where you would ignore the outer parts (e.g. 10 something pixels in each direction). You could do this with a construct like `if(pageX<10) pageX=10` etc: http://jsfiddle.net/8jJNV/5/ – devnull69 Dec 18 '12 at 13:19
Hmm... I think there's a better solution somewhere ;) Maybe to calculate the correct dimensions instead using the percentage... – yckart Dec 18 '12 at 13:25
If you use the x/y dimensions of the gray box minus width/height of the cursor box and scrollbar(!) you would get a total xa/ya that you could set in relation to the actual screen width and height: http://jsfiddle.net/8jJNV/7/ – devnull69 Dec 18 '12 at 13:33
Woops, looks nice! Thanks :-* – yckart Dec 18 '12 at 13:42

jQuery mousemove (cursor "overview") wrong calculation

1 Answers1