jQuery element selector issue

Question

My problem is a little bit complex.

I have the following code:

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
     var href = $(this).attr('href');
     if(hash==href.substr(0,href.length-5)){
      var toLoad = hash+'.html #content';
      $('#content').load(toLoad)
     }           
    });

    $('#nav li a').click(function(){

     var toLoad = $(this).attr('href')+' #content';
     $('#content').hide('fast',loadContent);
     $('#load').remove();
     $('#wrapper').append('<span id="load">LOADING...</span>');
     $('#load').fadeIn('normal');
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
     function loadContent() {
      $('#content').load(toLoad,'',showNewContent())
     }
     function showNewContent() {
      $('#content').show('normal',hideLoader());
     }
     function hideLoader() {
      $('#load').fadeOut('normal');
     }
     return false;

    });

});

Okay, first it's not me who coded it, so I really don't understand what it does and also I tried to change it but i didn't succeed. The code will select a 'nav li' link and display the page in an AJAX way, this mean without reloading it. It does this correctly :) Now, all I want to do it to add a fancybox to register users. To do that I should add the following code.

$("a#reg").fancybox({
 'hideOnContentClick': false
});

now I just put the code in $document.readyfunction and the fancy box works as it should, also the nav li links works well. So where's the problem? when I click a 'nav li' link and it load the content and then click again on the the home link, (I return to the first page), the fancy box no longer works. I know it's very sensitive so may be you have bad-understood it, so let me explain it in another way. I have both the selector of the 'nav li' and the selector of the fancy box link, what is the best method to make them works together??

Also can someone explain to me what the code does as well.
Thank you.

Answer 1

Ok... Here is what the code does :

    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
                var toLoad = hash+'.html #content';
                $('#content').load(toLoad)
        }                                                                                       
    });

This first part will get the hash of current page, check that one of the "nav li" links ends with this hash (5 chars expected) and if it's the case, will load the #content element of page hash + ".html" in the #content element of current page (I suppose it's a div).

Imagine you load the url "http://.../page1.html#page2". Page1 will be loaded and then, #content of page2.html will be loaded by an ajax call in #content of page1.

    $('#nav li a').click(function(){

        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
                $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
                $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
                $('#load').fadeOut('normal');
        }
        return false;

    });

This will add the following behaviour to "nav li" links : when clicked, show a "loading message" and load the #content of target page in #content element of current page.

I don't have any idea why this script, despite being terrible, would cause your fancybox not to show. My guess is that the "nav li" links will load the content with an ajax call and this will not affect your fancybox, which is already loaded, but when you click the home link, the page is completely reloaded and the fancybox code is not executed, for a reason. You can check that by adding a simple alert :

alert("initializing fancybox");
$("a#reg").fancybox({
    'hideOnContentClick': false
});

If the full page is reloaded when you click the home link, and this alert does not popup, you found the cause of your problem.