// Event handlers
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
});

with:

// Event handlers
$.address.externalChange(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
$("#mainContent").load($('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
console.log("change");
});

My next problem is that it will go backwards over divs that have been loaded via AJAX but won't go back to the initial page (the content that was originally loaded in the #area div before the AJAX loaded content entered the #area div).

Any help would be much appreciated!

Thanks again,
Andrew

Thanks for the great tutorial - I got almost everything working within minutes.

But I have a problem - the page seems to load into the #area div twice. Although this is imperceptible in your demo, when you start using more content it becomes noticeable. This is amplified if you try and add some jQuery animation!

I was wondering what I could do to prevent this from happening?

Thanks again for such an insightful tutorial.

Andrew

I used a similar setup, and it works fine in Chrome, but when looking at the console in firefox a warning comes up : e.success.call is not a function
http://localhost/webDev/lostine/wp-content/themes/lostine/js/jquery-1.4.1.min.js
Line 121

I used the .post() function, but tried .load() as well and they have similar issues