title: Random hovering element needs to hover over specific div
body: <p>I have tried a boatload of changes to the javascript and I cannot seem to get it right. Basically the function I have failed to get is to be able to make the hovering ghost div hover over a certain div or element in the page instead of just floating wherever it wants to.</p>
  
  <pre><code>$(document).ready(function(){
  animateDiv();
  
  });
  
  function makeNewPosition(){
  
  // Get viewport dimensions (remove the dimension of the div)
  var h = $(window).height() - 50;
  var w = $(window).width() - 50;
  
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  
  return [nh,nw];    
  
  }
  
  function animateDiv(){
  var newq = makeNewPosition();
  var oldq = $('.shape').offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);
  
  $('.shape').animate({ top: newq[0], left: newq[1] }, speed, function(){
    animateDiv();       
  });
  
  };
  
  function calcSpeed(prev, next) {
  
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);
  
  var greatest = x &gt; y ? x : y;
  
  var speedModifier = 0.3;
  
  var speed = Math.ceil(greatest/speedModifier);
  
  return speed;
  
  }
  
  
  
  $(document).ready(function(){
   $(".shape").show("slow");
   $(".coupontooltip").show("slow");
  
  
   });
  
  
  
  
  
  
  
  $(document).ready(function(){
   $(".coupontooltip").show("slow");
  
  
   });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/vL9zjamf/" rel="nofollow">A fiddle with the current situation</a></p>