jQuery Dynamic Page Loading wont work, not sure why any ideas?

Question

Live demo here <- http://webcallonline.exoflux.co.uk/html/

    $(function() {
 var url = $(this).attr("href");
    $("nav").delegate("a", "click", function(event) {
     event.preventDefault();
        window.location.hash = $(this).attr('href');
        $("#main").slideUp('slow', function(){
         $("#main").load(url + " #main", function()
      {
       $("#main").slideDown('slow');
      });
        });

    });

    $(window).bind('hashchange', function(){
     newHash = window.location.hash.substring(1);
    });

    $(window).trigger('hashchange');
});

Does anyone have any ideas?

Answer 1

This line:

var url = $(this).attr("href");

should be moved inside the click handler:

$("nav").delegate("a", "click", function(event) {
     var url = $(this).attr("href");
     event.preventDefault();

since you're loading content based on the href of the clicked anchor.

EDIT: or do you intend to get the current url?

var url = window.location.href;

?