Created
March 7, 2011 04:58
-
-
Save balupton/858093 to your computer and use it in GitHub Desktop.
Ajaxify a Website using the HTML4 HashChange Functionality
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function(window,undefined){ | |
// Prepare our Variables | |
var | |
document = window.document, | |
$ = window.jQuery; | |
// Wait for Document | |
$(window).bind(function(){ | |
// Prepare Variables | |
var | |
$content = $('#content'), | |
$body = $(document.body), | |
rootUrl = document.location.protocol+'//'+(document.location.hostname||document.location.host); | |
// Ajaxify our Internal Links | |
$.fn.ajaxify = function(){ | |
// Ajaxify internal links | |
$(this).find('a[href^="/"],a[href^="'+rootUrl+'"]').unbind('click').bind('click',function(event){ | |
var $this = $(this), url = $this.attr('href'), title = $this.attr('title')||null, relativeUrl = $(this).attr('href').replace(rootUrl,''); | |
document.location.hash = relativeUrl; | |
event.preventDefault(); | |
return false; | |
}); | |
// Chain | |
return this; | |
}; | |
// Ajaxify Page | |
$body.ajaxify(); | |
// Hook into State Changes | |
$(window).bind('hashchange',function(){ | |
// Prepare | |
var | |
relativeUrl = '/'+document.location.hash.replace(/^\//,''), | |
fullUrl = rootUrl+relativeUrl; | |
// Set Loading | |
$body.addClass('loading'); | |
// Start Fade Out | |
$content.fadeOut(800); | |
// Ajax Request the Traditional Page | |
$.get(url,function(data){ | |
// Find the content in the page's html, and apply it to our current page's content | |
$content.stop(true,true).show(); | |
$content.html($(data).find('#content')).ajaxify(); | |
if ( $content.ScrollTo||false ) $content.ScrollTo(); // http://balupton.com/projects/jquery-scrollto | |
$body.removeClass('loading'); | |
// Inform Google Analytics of the change | |
if ( typeof pageTracker !== 'undefined' ) { | |
pageTracker._trackPageview(relativeUrl); | |
} | |
}); // end get | |
}); // end onStateChange | |
}); // end onDomLoad | |
})(window); // end closure |
how to use this plugin to browser back button.
http://stackoverflow.com/questions/19951004/solution-for-browser-back-button-tracking?noredirect=1#comment29700977_19951004
could please help me to solve this issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
well , i don't know why the
$.fn.find
doesn't work for me . i use the jQuery JavaScript Library v1.6.1i try to use
$.fn.filter()
and it works.hope to help someone...