jQuery navigation with hashchange problem

jQuery navigation with hashchange problem

Hi,

I have a problem with the navigation on my site. I want my primary navigation to load content without the browser refreshing and it's working out alright except for the fact that my secondary navigation won't work at all. I'm going to put the code first, so I can use references:
  1. $(document).ready(function() {
  2.       var newHash      = "";
  3.       
  4.       // PRIMARY NAVIGATION
  5.       $("#main>nav a").click( function() {
  6.             window.location.hash = $(this).attr("href");
  7.             return false;
  8.       });
  9.     
  10.       $(window).bind('hashchange', function(){
  11.             newHash = window.location.hash.substring(1);
  12.             if (newHash) {
  13.                   $("#main-content")
  14.                   .find("#guts")
  15.                   .fadeOut(200, function() {
  16.                         $("#main-content").hide().load(newHash + " #guts", function() {
  17.                               $("#main-content").fadeIn(200);
  18.                               $("#main>nav a").removeClass("current");
  19.                               $("#main>nav a[href="+newHash+"]").addClass("current");
  20.                         });
  21.                   });
  22.             };
  23.       });
  24.       $(window).trigger('hashchange');

  25.       // SECONDARY NAVIGATION - currently no response
  26.       $("article nav a").click( function(){
  27.             $("article nav a").removeClass("current");
  28.             $(this).addClass("current");
  29.       });
  30. });
I have primary nav (site-wide) in the " #main>nav" and page-wide in the " article nav" . My problem seems to be this part of the code:
  1. $("#main>nav a").click( function() {
  2.       window.location.hash = $(this).attr("href");
  3.       return false;
  4. });
If I remove the return false; part, the secondary navigation works perfectly but my primary navigation is reduced to "conventional links" in the sense that the browser refreshes and the fadeIn-fadeOut thing is skipped.

The whole hashchange part - I'll be honest - is swiped from a tutorial asking me to do so.

Also, if there is a better way to achieve what I want, please let me know. I would like my secondary navigation to also fetch content on-the-fly meaning no refresh but of course, the primary link under which the secondary navigation exists should still have class="current" , but I'm not quite sure how to achieve this. What I like about the "idea" of the current structure is that it degrades nicely so that users with javascript disabled still have access to the entire site.
    • Topic Participants

    • jason