History.js Implementation For Non HTML5 Browsers - html

Question

I have an website I'm working on that uses Ajax it uses pushState and popstate, it works great in HTML5 browsers, but I want to get it to work in HTML4 browsers, IE& 8 and IE9.
I have tried History.js,
https://github.com/browserstate/History.js/
but cant' for the life of me figure out how to implement it. could some one give me some pointers?
Here is the code I'm using for HTML5,
if (history.pushState) {
function currentPage(url){
var index = /index/g,
program = /program/g,
photos = /photos/g,
testimonials = /testimonials/g,
about = /about/g,
contact = /contact/g;
if (program.test(url)){
changeCurrentPage('#program');
document.title = "Our Programs Kolibri Daycare";
}else if (photos.test(url)){
changeCurrentPage('#photos');
document.title = "Photos Kolibri Daycare";
}else if (testimonials.test(url)){
changeCurrentPage('#testimonials');
document.title = "Tesimonials Kolibri Daycare";
}else if (about.test(url)){
changeCurrentPage('#about');
document.title = "About Kolibri Daycare";
}else if (contact.test(url)){
changeCurrentPage('#contact');
document.title = "Contact Kolibri Daycare";
}else {
changeCurrentPage('#home');
document.title = "Kolibri Daycare";
}
}
function changeContent(url) {
$.ajax({
url: "getContents.php?url=" + url,
success: function(responseText){
$("#content").html(responseText);
}
});
currentPage(url);
}
$(document).ajaxComplete(function(event, request, settings) {
if (settings.url == 'getContents.php?url=photos.html') {
$("a[rel=example_group]").fancybox({
'overlayShow' : false,
'cyclic' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
}
});
$(document).ready(function() {
var elems = null,
links = null,
link = null,
i;
elems = document.getElementById('nav');
links = elems.getElementsByTagName('a');
if (links) {
for (i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(e) {
var url = $(this).attr("href");
changeContent(url);
history.pushState(null, null, url);
e.preventDefault();
}, false);
}
}
window.setTimeout(function() {
/*window.addEventListener("popstate", function(e) {*/
window.onpopstate = function (e) {
var pathArray = window.location.pathname.split( '/' );
var n = pathArray.length;
if (pathArray[n-1]){
changeContent(pathArray[n-1]);
}else {
changeContent('index.html');
}
/*}, false);*/
}
}, 1);
});
}
Here is a link to the test site.
http://robfenwick.com/kolibri4/index.html

Answer 1

Ok maybe the problem was that you weren't using History.js in the right way ( that's the problem i was having too ). Basically to use History.js in the correct way you must do something like:
// Register navigation click handlers where you will load Ajax content
$( window ).on( 'click', 'a.ai1ec-load-view', handle_click_on_link_to_load_view );
// Bind to the statechange event
$( window ).bind( 'statechange', handle_state_change );
// When the state changes, load the corresponding view
var handle_state_change = function( e ) {
var state = History.getState();
load_view( state.url, 'json' );
};
// When clicking on a link you want to load, trigger statechange by changing state
var handle_click_on_link_to_load_view = function( e ) {
e.preventDefault();
History.pushState( { target :this }, null, $( this ).attr( 'href' ) );
};
Before doing this i wasn't listening to statechange and i was simply using pushState() in the link click handler.
If you do it like this there is no need to code a fallback, it will work also in html4 browsers ( and bookmarks from html4 browsers will work as expected )