AJAXify your Website

You can AJAXify your Viviti site, or make all of your pages load via AJAX by adding some simple JavaScript code utilizing the built in jQuery.

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);}); 
  });
}

Example:

Viviti user Yuao's site is currently configured to load pages via AJAX:

http://showcase.imyuao.com/