Posted By

iTony on 05/26/08


Tagged

ajax navigation jquery usability


Versions (?)

Who likes this?

12 people have marked this snippet as a favorite

korzhik
orion
nbsp
umang_nine
annalog
dandelauro
seanpowell
wirenaught
ringo380
Mench59
Beppoi
_duddy


jQuery AJAX navigation


 / Published in: JavaScript
 

  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  

You need to login to post a comment.