Question

For fun I tried to animate an object and load content after it, because I loved the idea.
It’s working but theres a bug in the jQuery I guess, which I can’t handle currently.
The Divbox ‘nav’ should animate to the top and STICK there! after that it should load the content. It’s working but the nav box wont stick to the top in Firefox 4.0. In Firefox 3.5 there is no Animation! Firefox 5.0 and Opera 11 is working for me. Anyone got a solution for this Problem?

jQuery Code:

jQuery.fn.center = function(centerCallback) {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    if (centerCallback != undefined) {
        centerCallback(this);
        return this;
    }
}

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


    $('#main_navigation a').click(function() {
        var toLoad = $(this).attr('href') + ' #content';
        $('#content').hide('fast', loadContent);
        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;

    });
});


var navi_switch = true;
var content_container = 'test';
$(document).ready(function() {
    $('#wrapper').center(function() {
        $('#main_navigation').css("top", (parseInt($('#main_navigation').parent().height()) - parseInt($('#main_navigation').height())) / 2 + "px");
    });

    $('#main_navigation a').click(function() {
        var attr = $(this).attr('href');
        if (navi_switch) {
            $('#main_navigation').animate({
                top: '0'
            }, 500, function() {
                navi_switch = false;
                $('#content').load(attr);
            });
        } else {
            $('#content').load(attr);
        }


        return false;
    });
});

Greetings

Answer 1

Lets see now …

1. Two click handlers assign to the a elements, both making ajax requests to different urls.
2. $('#content').load(attr); does not use the #content to filter the results..

also

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent())  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader());  
} 

should really be

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent /*no parenthesis here, just passing a callback */)  
}  
function showNewContent() {  
    $('#content').show('normal',hideLoader /*no parenthesis here, just passing a callback */);  
}  

Fix these issues for start, and come back if the issues persist..

---

Merged Parts

jQuery.fn.center = function(centerCallback) {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    if (centerCallback != undefined) {
        centerCallback(this);
        return this;
    }
}

var navi_switch = true;
var content_container = 'test';

$(document).ready(function() {

    loadInitialContent(); // call our function to load the initial content based on url hash
    $('#wrapper').center(function() {
        $('#main_navigation').css("top", (parseInt($('#main_navigation').parent().height()) - parseInt($('#main_navigation').height())) / 2 + "px");
    });

    $('#main_navigation a').click(function() {
        var href = $(this).attr('href'); // get the href
        window.location.hash = href.substr(0, href.length - 5); // change the hash of the url
        href += ' #content'; // add the #content filter to the href
        if (navi_switch) {
            $('#main_navigation').animate({
                top: '0'
            }, 500, function() {
                navi_switch = false;
                $('#content').hide('fast', function(){
                   $(this).load(href, function(){
                      $(this).show('normal', function(){
                          $('#load').fadeOut('normal');
                      });
                   });
                });

            });
        } else {
               $('#content').hide('fast', function(){
                   $(this).load(href, function(){
                      $(this).show('normal', function(){
                          $('#load').fadeOut('normal');
                      });
                   });
                });
        }

        return false;
    });
});

function loadInitialContent() {
    var hash = window.location.hash.substr(1);
    var href = $('#main_navigation a[href^="' + hash + '."]').attr('href') + ' #content';
    $('#content').load(href);
}