1

I'm currently using the jQuery BBQ hashchange plugin to generate hash changes so that when my content div animates, I have back button functionality. I've found a tutorial, which has given me the functionality I want, but I'm having trouble getting my menu to indicate which hash it is on.

Here's my basic code:

HTML

<ul class="tabNavigation">

  <li>
      <a class="" href="#Contact">
        contact
      </a>
  </li>  

  <li>
      <a class="" href="#Portfolio">
        portfolio
      </a>
  </li>

  <li>
      <a class="" href="#Services">
        services
      </a> 
  </li> 

  <li>
      <a class="" href="#About">
        about
      </a>
  </li>

  <li>
      <a href="#Landing" class="selected">
        home
      </a>
  </li>  

</ul>

jQuery

$(window).bind('hashchange', function () {

  var hash = window.location.hash || '#Landing';
  $(".Content").animate({marginTop: "1500px"}, '500', 
    function(){tabContainers.hide().filter(hash).show(), function(){}}); 
  $(".Content").animate({marginTop: "0px"}, '500');
  $("ul.tabNavigation a").removeClass("selected");
  $("a[hash=" + hash + "]").addClass("selected");
});

CSS

ul.tabNavigation li
{
  position: relative;
  display: inline-block;
  float: right;
  font-family: "Baskerville";
  font-size: 18px;
  list-style-type: none;
  text-align: left;
  margin-top: 0;
}

ul.tabNavigation li a
{
  display: inline-block;
  text-decoration: none;
  color: white;
  margin-right: 5px;
  margin-top: 0;
}

ul.tabNavigation li a:hover
{
  display: inline-block;
  text-decoration: none;
  color: #91A493;
  margin-right: 5px;
}

ul.tabNavigation li a.selected
{
  color: blue;
}

I've set the script up so that upon the page loading "Home" is selected, and it displays blue as it should. Upon clicking a link, the class "selected" is removed as it should, but the line $("a[hash=" + hash + "]").addClass("selected"); doesn't seem to be doing anything, and I cannot for the life of me figure out why. I've pored over the code on the tutorial, see it working, but it doesn't work on my page. I'd really appreciate another set of eyes...I'm sure it's something stupid at this point. Thanks for any help.

EDIT - removed some extraneous information in the markup and CSS.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
stupendousman
  • 93
  • 2
  • 9
  • Can you say more precisely what's not working? Is BBQ showing some working success? Is there a problem with the Back button function? Maybe a JS Fiddle would help. – Smandoli Jul 14 '13 at 01:52
  • Hey! I started making a JS Fiddle, but I wasn't sure if I can include the BBQ plugin? Maybe I can...not sure. BBQ is working. The problem seems to be the last line in the script, which is how the menu indication should occur. The previous line is removing the class just fine. I also tried something like $("ul.tabNavigation a").filter(hash).addClass("selected");, but that didn't work either. There seems to be some trouble in my variable "hash" that won't link up correctly with my anchor tags in the HTML. – stupendousman Jul 14 '13 at 03:37
  • Oh yeah, no Fiddle. Checked that `hash` is receiving the value correctly? – Smandoli Jul 14 '13 at 04:14
  • 1
    Yes. If I run 'alert(hash)' it pops up every time that bit of code runs, and has the correct value. The more I think about it, it seems that the jQuery is fine and that the problem lies somewhere in the HTML, but I can't see it. When I look at the [example code](http://jqueryfordesigners.com/demo/back-button.html) it seems like I have everything right, but his is working, and mine is not. – stupendousman Jul 14 '13 at 11:36
  • All I can think is that you should overwrite your work with the sample page, then revise in small steps back to your desired result. I call it "refractoring." – Smandoli Jul 14 '13 at 14:46
  • Yeah, I think that's what I'm going to have to do. I think I'm going to just download his source code and see if I can't just start dumping in my code and see at what point it breaks. – stupendousman Jul 15 '13 at 11:18

1 Answers1

1

Finally found the answer! When one is using an example from 2010, one should use the same jQuery library as the example. If I copy the jQuery library from the example and load it instead of the latest version, everything works like a charm. So something in the line $("a[hash=" + hash + "]").addClass("selected"); must not be working in the latest build (or it was deprecated.)

stupendousman
  • 93
  • 2
  • 9