swine.dk AJAX loading
by Steen Nielsen on 15.02.09
I have been using the jQuery AJAX functionality on some of my projects at work and I thought that it would be fun to implement some AJAX functionality here on swine.dk too. So I have implemented a very simple script, that loads the content of the links into the primary content area on swine.dk. It is unobstructive, so if you don't have Javascript activated, links will still work, but will just be with the normal behaviour.
As of the time of writing, all I have done is implement the jQuery library and written the following javascript code:
if (location.hash){
$('.primaryContent { display: none; }').appendTo('head');
}
$(function(){
if (location.hash != ""){
var loadUrl = location.hash.replace('#','');
$('.primaryContent').load(loadUrl + ' .primaryContentInner', function(){
$(this).show();
});
}
$('a:not([href^="http://"]):not([href$="rss-20.aspx"])').live('click',function(){
$('.primaryContent').load($(this).attr('href') + ' .primaryContentInner');
location.href = '#'+ $(this).attr('href');
return false;
});
});
If we just break it up, into smaller pieces, the first couple of lines puts a style block in the bottom of the head element, which hides the primaryContent, but only if there's something in the location.hash.
Then when the entire website have been loaded, it takes the content of the location.hash, which is a URL and loads the content of the page in that URL. when the content have been loaded, I show the primary content again. all of this only happens if there is something in the location.hash.
All links, where the href doesn't start with http:// and doesn't end with 'rss-20.aspx', will load the content of the link into primaryContent element, change the location href to the currently open page and cancel the default behaviour of the link.
That was pretty much it. There's no transition effects yet. I may include it later, when I get bored of looking at it as it is now :)
If you want to see it in action, just navigate around on this site while looking at the address bar in your browser.
Update (16.02.2009)
I have removed the AJAX loading script, why, well.. I have just reconsidered using the AJAX loading script.