"Too much recursion" error when loading the same page with a hash
- by Elliott
Hi, 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.
