Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Would like help improving history.pushState + cross-brower support? Re: Would like help improving history.pushState + cross-brower support?

#93890
FireDart
Member

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.).