Would like help improving history.pushState + cross-brower support?

[FireDart]

Hi everyone,
I could really use some help improving my current jQuery/history.pushState script. Am not really a JavaScript wize (by far) but I wanted to try something new and got my self into the mess.

Am working or my portfolio (redesign) and wanted to use jQuery to add some Ajax Loading, but wanted to keep my nice seo url, mostly for aesthetics. So experimented and tried a bunch of stuff, then learned about history.pushState (not knowing it’s really meant for HTML5). Now am having issue with older browsers + ie (not really surprised with IE except for IE9).

Anyway, my code:

$(document).ready(function() {

// URL

var url = window.location.href;

// Loader

function Loader(url) {

$('#body').slideUp("slow", function() {

$('#body').load(url + " #content", function(){

$('#body').slideDown("slow");

});

});

};

// NavUpdate

function NavUpdate(url) {

// Strip .html, .php, anything with antentsion

var url = url.split('.')[0];

// Remove Old Class

$('ul#navigation li').removeClass('active');

// Add New Class

$('a[href*=' + url + ']').parent().addClass('active');

};

// On Click of any a, start Ajax Load

$("a").live('click', function() {

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

if(url.match("^http")){

// If page is external forget ajax!

return true;

} else {

// Else if the link is internal load

// Push State

history.pushState(null, "", url);



// Change ul#navigation li to active

NavUpdate(url);

// Load Content

Loader(url);

return false;

}

});

// Enable Back Button

$(window).bind('popstate', function() {

Loader(location.pathname);

});

});

If anyone is willing to help could explain what I could do to ensure history.pushState works in older browsers + anyway to clean-up my jQuery code? Am sure some of you are yelling at me right now.

Any help would be great,
-Julian

[FireDart]

Alright a lot of work but this is my final code for anyone that wants it….

$(document).ready(function() {

// Loader

function Loader(url) {

$('#body').slideUp("slow", function() {

$('#body').load(url + " #content", function(){

$('#body').slideDown("slow");

});

});

};

// NavUpdate

function NavUpdate(url) {

// URL

var url = window.location.href;

// Strip the host base

var strip = ".com/";

var url = url.split(strip)[1];

// Strip the .html, .php

var url = url.split('.')[0];

// Strip the first slash

var url = url.split('/')[0];

// Remove Old Class

$('ul#navigation li').removeClass('active');

// Add New Class

$('a[href^=' + url + ']').parent().addClass('active');

};

// On Click of any a start Ajax Load

$("a").live('click', function() {

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

if(url.match("^http")){

// If page is external forget ajax!

return true;

} else {

// Else if the link is internal load

// Add/Update Hash

if(typeof history.pushState === "function") {

// Push State

history.pushState(null, "", url);

// Enable Back Button

$(window).bind('popstate', function() {

Loader(location.pathname);

});

}



// Change ul#navigation li to active

NavUpdate(url);

// Load Content

Loader(url);

return false;

}

});

});

I just ended up forgeting no HTML5 browsers (a.k.a IE).

If you want to use this remember that you must change the line:

var strip = ".com/";

to the base of your directory.

The Script will:
Enable all local a href’s to use ajax to load into the #body div
Updates the ul#navigation li with the current active page
^ This will also check the base path (after .com and before first /) and see if it is the navigation a href to event support sub pages (Such as a link to forum/discussion/blah will see the base forum/ and add class .active.).

[Author]

Posts