We Recommend

Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

iTony on 05/26/08

Tagged

ajax navigation jquery usability

Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

korzhik
orion
nbsp

jQuery AJAX navigation

Published in: JavaScript

Plain TextExpand

$(document).ready(function() {
 
    // Check for hash value in URL
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        } 
    });
 
    $('#nav li a').click(function(){
 
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('&lt;span id="load"&gt;LOADING...&lt;/span&gt;');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
 
    });
});

Report this snippet

Comment:

You need to login to post a comment.