Question

I have a website with ajax loaded content. Now I want to implement the jQuery address plugin for better user experience and SEO crawling.

With this line $.address.value($(this).attr('href')); the address changing thing works, but how can I do the history support, crawling and so on?

There is something with the $.address.change(function(event){...}); I have to do, but what? I’ve tried to put the $("#content").load(toLoad,'',showNewContent) in it, and other thousand things, unfortunately with no results.

The documentation is really poor: http://www.asual.com/jquery/address/docs/

This is my code:

$('a:not([href^=http])').click(function() {

    var toLoad = $(this).attr('href') + " #ajaxedContent";

    $("#content").fadeOut(600,loadContent);

    $("#load").remove();
    $('#logo').append('<div id="load"></div>');
    $("#load").fadeIn(100);

    $.address.value($(this).attr('href'));

    function loadContent() {
        $("#content").load(toLoad,'',showNewContent)
    }

    function showNewContent() {
        // Capture the final dimensions of the content element and animate, finally fade content in
        $("#limit").animate({height: $("#content").height()},600,'easeInOutQuad',function() {
            $("#content").fadeIn(600,hideLoader);
            callback();
        });
    }

    function hideLoader() {
        $("#load").fadeOut(300);
    }

    return false;
});

The basic implementation looks like this:

$.address.change(function(event) {
    // do something depending on the event.value property, e.g.
    // $('#content').load(event.value + '.xml');
});

$('a').click(function() {
    $.address.value($(this).attr('href'));
});

Any help would be very appreciated. Thank you.

Answer 1

This way it works:

$.address.init(function(event) {

    $('a:not([href^=http])').address();

}).change(function(event) {

    var toLoad = event.path + " #ajaxedContent";

    $("#content").fadeOut(600,loadContent);

    $("#load").remove();
    $('#logo').append('<div id="load"></div>');
    $("#load").fadeIn(100);

    function loadContent() {
        $("#content").load(toLoad,'',showNewContent)
    }

    function showNewContent() {
        // Capture the final dimensions of the content element and animate, finally fade content in
        $("#limit").animate({height: $("#content").height()},600,'easeInOutQuad',function() {
            $("#content").fadeIn(600,hideLoader);
            callback();
        });
    }

    function hideLoader() {
        $("#load").fadeOut(300);
    }

    return false;
});