How to Ajaxify your website with Ajaxify and history.js

Ajaxify is a great gist over on github by balupton that allows you to load page changes in via AJAX with a nice fade effect. URL’s are also kept intact while browsing and using History.js, browser history is handled correctly. It is very easy to install, however, aside from the the initial set up, there is not much documentation so I’m going to share some things that I discovered while setting up a couple of different sites. The initial set up if offensively easy and is exactly the as described on the Gist page. You just need to include jQuery, jQuery ScrollTo, History.js and the Ajaxify gist:

This is all you need. If you take a look at this EXAMPLE, you will see that pages are already loading with AJAX. Something quite annoying I have noticed though is that it also outputs the page title at the top of the page on page change. You can easily hide this in CSS with:

.document-title{display:none}

The page change here is using AJAX but the whole page fades in and out with a white haze which is fine, but if you have a site with a common layout - static nav and content area throughout - we can improve on it by specifying just the main content to be Ajaxified. Looking in the code for the gist, you will notice this line:

......
contentSelector = '#content,article:first,.article:first,.post:first',
......

Ajaxify looks for any elements matching these selectors and applies the effect just to them. So, using the above example, we can Ajaxify just the main content div by adding an id of “content” to it (you can also achieve this by structuring your page using the HTML5 elements “article” or “post”):

…..

……

…..

Now, when you look at this EXAMPLE, you can see that when you change pages, only the main content is switched - notice the URL and titles still change too. You are also able to navigate to either of the pages directly by entering their URL in the address bar and clicking the ‘back’ and ‘forward’ buttons in your browser takes you through your history correctly. Sometimes, you will want to disable AJAX from a link. A common situation is with image lightboxes such as fancybox where ajaxyify will interfere with the plugin. You will have a link like so:

Image Title

AJAX will automatically be applied to this link so you will need to disable it. In ajaxyify.html5.js there is this line watches links to ajaxify:


$this.find(‘a:internal:not(.no-ajaxy)’).click(function(event){

From this selector, you can easily see that by adding the class no-ajaxy to a link you can get ajaxify to ignore it. Like so:

Click me
Image Title

From the below lines, you will notice that Ajaxify triggers a ‘statechangecomplete’ event on page change:


completedEventName = ‘statechangecomplete’,

// Complete the change
$window.trigger(completedEventName);

You can listen for this event like so:


$(window).on(‘statechangecomplete’, function(e, eventInfo){
//your code
})