title: jQuey- too much recursion / maximum call stack size exceeded for mousemove
body: <p>I know it’s an old one, but I need specific help with this and suspect I need a base terminate condition; however, I’m stump as to what/where because it’s a hover (mousemove) action.</p>
  <p>Would really appreciate if someone could point it out for me.</p>
  <p>Basically, I’m trying to adapt an old ‘abandoned’ jquery into a Wordpress plugin. It’s working for the most part, but as soon as I re-edit the page the error start. To be clear, this is not a Wordpress issue or question.</p>
  <p>Browser hangs on the slow script and I’m pretty sure it’s missing a base terminate condition.
  Error message varies between &quot;InternalError: too much recursion&quot; and &quot;Maximum call stack size exceeded&quot;</p>
  <p>Image and Image-zoom are two images and size is the magnifier size, all loaded to the dataset attribute of a div.
  The script would then reveal some of the second image in a 'magnifier' as the pointer in moved over the main image.</p>
  <p>The jQuery part:</p>
  <pre><code>
      (function($){
          
          $.fn.magnifierRentgen = function() {
  
              return this.each(function() {
  
                  var th        = $(this),
                  dataImage     = th.data(&quot;image&quot;),
                  dataImageZoom = th.data(&quot;image-zoom&quot;),
                  dataSize      = th.data(&quot;size&quot;);
  
                  th
                  .addClass(&quot;magnifierRentgen&quot;)
                  .resize(function() {
                      th.find(&quot;.data-image, .magnifier-loupe img&quot;).css({
                          &quot;width&quot; : th.width()
                      })
                  })
                  .append(&quot;&lt;img class='data-image' src='&quot; + dataImage + &quot;'&gt;&lt;div class='magnifier-loupe'&gt;&lt;img src='&quot; + dataImageZoom + &quot;'&gt; &quot;)
                      .hover(function() {
                          th.find(&quot;.magnifier-loupe&quot;).stop().fadeIn()
                      }, function() {
                          th.find(&quot;.magnifier-loupe&quot;).stop().fadeOut()
                      })
                      .find(&quot;.data-image&quot;).css({
                          &quot;width&quot; : th.width()
                      }).parent().find(&quot;.magnifier-loupe&quot;).css({
                              &quot;width&quot;  : dataSize,
                              &quot;height&quot; : dataSize
                          })
                          .find(&quot;img&quot;).css({
                              &quot;position&quot; : &quot;absolute&quot;,
                              &quot;width&quot;    : th.width()
                          });
  
                  th.mousemove(function(e) {
  
                      var elemPos = {},
                          offset  = th.offset();
  
                      elemPos = {
                          left : e.pageX - offset.left - dataSize/2,
                          top  : e.pageY - offset.top - dataSize/2
                      }
  
                      th
                      .find(&quot;.magnifier-loupe&quot;).css({
                              &quot;top&quot;  : elemPos[&quot;top&quot;],
                              &quot;left&quot; : elemPos[&quot;left&quot;]
                          })
                          .find(&quot;img&quot;).css({
                              &quot;top&quot;   : -elemPos[&quot;top&quot;],
                              &quot;left&quot;  : -elemPos[&quot;left&quot;],
                              &quot;width&quot; : th.width()
                          })
  
                  });
  
                  $(window).resize(function() {
                      $(&quot;.magnifierRentgen&quot;).resize();
                  });
  
              });
  
          };
  
      })(jQuery);
  
  </code></pre>
  <p>and the div it targeted by unique id(parent) as well as the class(.fl-loupe-reveal)</p>
  <pre><code>
      jQuery(function($) {
          $('.fl-node-&lt;?php echo $id; ?&gt; .fl-loupe-reveal').magnifierRentgen();
      });
  
  </code></pre>
  <p>and the div looks like this:</p>
  <pre><code>    &lt;div class=&quot;fl-loupe-reveal loupereveal-container&quot;
               data-image=&quot;&lt;?php echo $settings-&gt;photo_one_src; ?&gt;&quot; 
               data-image-zoom=&quot;&lt;?php echo $settings-&gt;photo_two_src; ?&gt;&quot;
               data-size=&quot;&lt;?php echo $settings-&gt;loupe_size; ?&gt;&quot; &gt;
          &lt;/div&gt;
  
  </code></pre>