Nullcreations.net

I recently noticed an interesting Viviti site that utilizes the built in jQuery and some simple JavaScript to make all the pages load via AJAX, and thought I'd quickly do a write up for anyone else using Viviti who would like to do the same thing.

Since the main content area of Viviti is inside a div#location_0, all you have to do is hook into the primary navigation links and use the jQuery load function to replace the contents of #location_0 on the current page with the contents of #location_0 on the target page. Adding a slideUp/slideDown with some callbacks makes it have a nice transition as well.

The JavaScript to do this is: 

$j('#primary_navigation li a').click(function() { loadPage( $j(this).attr('href')); return false; });

function loadPage( page ) { 
  $j('#location_0').slideUp(300, function() { 
    $j('#location_0').load( page + ' #location_0 > *', function() { $j('#location_0').slideDown(300);}); 
  });
}

You will need to add this in a script tag to your Viviti theme or as an external JavaScript file. YuAo's script is a bit more complicated and adds a loading indicator as well as dealing with url hash stuff so bookmarking and history works as well, you can check it out at http://showcase.imyuao.com.