Advanced Search

jQuery AJAX navigation

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(document).ready(function() {
  2.  
  3.     // Check for hash value in URL
  4.     var hash = window.location.hash.substr(1);
  5.     var href = $('#nav li a').each(function(){
  6.         var href = $(this).attr('href');
  7.         if(hash==href.substr(0,href.length-5)){
  8.             var toLoad = hash+'.html #content';
  9.             $('#content').load(toLoad)
  10.         } 
  11.     });
  12.  
  13.     $('#nav li a').click(function(){
  14.  
  15.     var toLoad = $(this).attr('href')+' #content';
  16.     $('#content').hide('fast',loadContent);
  17.     $('#load').remove();
  18.     $('#wrapper').append('<span id="load">LOADING...</span>');
  19.     $('#load').fadeIn('normal');
  20.     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  21.     function loadContent() {
  22.     	$('#content').load(toLoad,'',showNewContent())
  23.     }
  24.     function showNewContent() {
  25.     	$('#content').show('normal',hideLoader());
  26.     }
  27.     function hideLoader() {
  28.     	$('#load').fadeOut('normal');
  29.     }
  30.     return false;
  31.  
  32.     });
  33. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.