title: JQuery follow mouse curser within in a div centered on page
body: <p>I have followed some wonderful code to have an image follow the mouse cursor within a div container at <a href="http://jsfiddle.net/fhmkf/" rel="nofollow">http://jsfiddle.net/fhmkf/</a>. 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. </p>
  
  <p>I need to position my div in the center of the page or nest it in a div centered. </p>
  
  <p>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)</p>
  
  <p>Here is my code.
  JavaScript</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="centerdiv"&gt;
  &lt;div class="container"&gt;
          &lt;div id="follower"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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). <a href="http://jsfiddle.net/3964w/" rel="nofollow">http://jsfiddle.net/3964w/</a> </p>
  
  <p>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.</p>
  
  <p>Thank you. </p>