JQuery follow mouse curser within in a div centered on page

Question

I have followed some wonderful code to have an image follow the mouse cursor within a div container at http://jsfiddle.net/fhmkf/. The problem is, this method only works for div containers fixed in absolute left/top position and relies on e.pageX and e.pageY coordinates.

I need to position my div in the center of the page or nest it in a div centered.

When I try to attempt to proceed centering the div, its screws up the mouse cursor and image. The object will only move with I have the mouse up in the upper left hand corner of the browser (because its using e.pageX and e.pageY coordinates)

Here is my code. JavaScript

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX, limitX);
   mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);

My CSS

.centerdiv {
    width:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
}


.container
{
    width:150px;
    height:150px;   
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
}

My HTML

<div class="centerdiv">
<div class="container">
        <div id="follower"></div>
</div>
</div>

I created an FSFiddle to show you what happens (notice you can only move the object when you have the cursor to the left and top edge of the page). http://jsfiddle.net/3964w/

I believe its related to e.PageX and e.PageY and I saw somewhere to use e.ClientX and e.ClientY but I don't know how.

Thank you.

Rapacious

im using it and it works perfectly – Nugget

Answer 1

You can use jQuery's .offset() to get the position of the element relative to the document, then subtract its left and top from the e.pageX and e.pageY values, respectively.

To ensure it stays within the box, you need a lower bound on the mouseX and mouseY values. You could use Math.max or the ifs like I used below.

$(window).mousemove(function(e){
  var offset = $('.container').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

JSFiddle demo

Aloeswood

So close! I see the object disappears to the left so I removed overflow:hidden; from .container and I see the object follows the cursor to the left of the browser and not retaining in the .container div. If that can stay in the .container div, it will work perfect :) thanks for such the quick reply! – Rapacious

That works like magic CheeseWarlock. :) My only request and not sure if its possible, I just noticed that the cursor point when stopped in the .container lines up with the upper left corner of #follower div container. I was hoping to be top "center" (not top left) because my image is an up arrow :) Besides that, this is perfect – Rapacious

Sure, it just takes a minor modification. JSFiddle – Aloeswood

Answer 2

Very nice example i needed this. Use your centerdiv to trigger the effect to save some performance and use position() and margin() to determine the real location of your div.

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
var stage = $(".centerdiv"), position = stage.position();

stage.mousemove(function(e){
   mouseX = Math.min(e.pageX - position['left'], limitX);
   mouseY = Math.min(e.pageY - position['top'], limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);

Folse