title: "Too much recursion" error when loading the same page with a hash
body: <p>I have a site w/ an image gallery ("Portfolio") page.  There is drop-down navigation that allows a user to view a specific image in the portfolio from any page on the site.  The links in the navigation use a hash, and that hash is read and converted into a string of an image filename.  The image src attribute on the /portfolio/ page is then swapped out with the new image filename.</p>
  
  <p>This works fine if I'm clicking the dropdown link from a page OTHER THAN the /portfolio/ page itself.  However if I take the same action from the /portfolio/ page, I get a "too much recursion" error in Firefox.  Here's the code:</p>
  
  <p>Snippet of the nav markup:</p>
  
  <pre><code>&lt;li&gt;Portfolio Category A
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="/portfolio/#dining-room-table"&gt;Dining Room Table&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/portfolio/#bathroom-mirror"&gt;Bathroom Mirror&lt;/a&gt;&lt;/li&gt;
  
    &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>JS that reads the hash, converts it to an image filename, and swaps out the image on the page:</p>
  
  <pre><code>$(document).ready(function()
  {
      if(location.pathname.indexOf("/portfolio/") &gt; -1)
          {
              var hash = location.hash;
              var new_image = hash.replace("#", "")+".jpg";
              swapImage(new_image);
          }
  });
  
  function swapImage(new_image)
  {
      setTimeout(function()
      {
          $("img#current-image").attr("src", "/images/portfolio/work/"+new_image);
      }, 100);
  }
  </code></pre>
  
  <p>I'm using the setTimeout function because I'm fading out the old image before making the swap, then fading it back in.  I initially thought this was the function that was causing the recursion error, but when I remove the setTimeout I still have this problem.</p>
  
  <p>Does this have to do with a closure I'm not aware of?  I'm pretty green on closures.</p>
  
  <p>JS that listens for the click on the nav:</p>
  
  <pre><code>$("nav.main li.dropdown li ul li").click(function()
  {
      $(this).find("a").click();
      $("nav.main").find("ul ul").hide();
      $("nav.main li.hover").removeClass("hover");
  });
  </code></pre>
  
  <p>I haven't implemented the fade in/out functionality for the dropdown nav yet, but I have implemented it for Next and Previous arrows, which can also be used to swap out images using the same swapImage function.  Here's that code:</p>
  
  <pre><code>$("#scroll-arrows a").click(function()
  {
  
      $("#current-image").animate({ opacity: 0 }, 100);
  
      var current_image = $("#current-image").attr("src").split("/").pop();
      var new_image;
      var positions = getPositions(current_image);
  
      if($(this).is(".right"))
      {
          new_image = positions.next_img;
      }
      else
      {
          new_image = positions.prev_img;
      }
  
      swapImage(new_image);
  
      $("#current-image").animate({ opacity: 1 }, 100);
  
      return false;
  });
  </code></pre>
  
  <p>Here's the error I'm getting in Firefox:</p>
  
  <pre><code>too much recursion
  var ret = handleObj.handler.apply( this, arguments );
  jquery.js (line 1936)
  </code></pre>
  
  <p>Thanks for any advice.</p>