Folio moves to beta [V 0.3]

So ive been building my folio for a little while now, all sleek jQuery animations that would resemble the animation of a Flash website. But of course the main problem with Flash is there is no jumping to a page via a URL (unless you set up SWF Address, even then you still have to load the whole Flash file), you have to actually manually go there and select the page you want.

So i set out on finding the jQuery version of SWF Address. Considering how easy SWF Address was i figured there must be an even easier jQuery version right, its a native web language it should be easier… WRONG! So after alot of messing around with sample code provided by the plugin creators, i created a switch statement that would fire off functions depending on the URL.

So now i can send someone a link and it will load up my folio on the website by using the URL “http://splatdesigns.com.au/#/portfolio”.

This also mean that once you start using the website you can use the Forward and Back buttons of your browser to animate forwards and backwards through the site!

w00t!

Check it out

The sweet little code behind the it:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.address-1.1.min.js"></script>
<script type="text/javascript">

// switch for action
var log = function(msg) {

switch (msg)
{
case "/about":

	$('.log').animate( {width:"400px", height:"500px", }, 1000 );

break;
case "/portfolio":

	$('.log').animate( {width:"900px", height:"500px", }, 1000 );

break;
case "/contact":

	$('.log').animate( {width:"800px", height:"500px", }, 1000 );

break;
case "/":

	$('.log').animate( {width:"10px", height:"500px", }, 1000 );

break;

default:

}

}

// Event handlers
$.address.init(function(event) {

log('init: ' + event.value);
}).change(function(event) {

log('change: ' + event.value);

var text = (event.value == '/') ? 'Home' :
event.pathNames[0].substr(0, 1).toUpperCase() +
event.pathNames[0].substr(1);

}).internalChange(function(event) {

log(event.value);
}).externalChange(function(event) {
log(event.value);
});

</script>