Question

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.

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:

Snippet of the nav markup:

<li>Portfolio Category A
  <ul>
      <li><a href="/portfolio/#dining-room-table">Dining Room Table</a></li>
      <li><a href="/portfolio/#bathroom-mirror">Bathroom Mirror</a></li>

  </ul>
</li>

JS that reads the hash, converts it to an image filename, and swaps out the image on the page:

$(document).ready(function()
{
    if(location.pathname.indexOf("/portfolio/") > -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);
}

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.

Does this have to do with a closure I’m not aware of? I’m pretty green on closures.

JS that listens for the click on the nav:

$("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");
});

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:

$("#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;
});

Here’s the error I’m getting in Firefox:

too much recursion
var ret = handleObj.handler.apply( this, arguments );
jquery.js (line 1936)

Thanks for any advice.

Answer 1

I would assume that clicking the link also triggers a click on the UL / LI which you observe and in which you execute (another) click on the anchor, which triggers your observer again, and so on. Every time the /portfolio/ then gets reloaded and the ready() fires and somewhere in there it recurses. Have you tried to look at the callstack in the debugger? Should become pretty obvious between which methods it bounces.

René