Skip to main content

Ajaxify a web site using the HTML 4 hash change functionality.

(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