title: jquery AJAX backbutton problems
body: <p>This is a bit weird to explain so ill do my best.</p>
  
  <p>Im working on a mobile site that im trying to shape into an ios app (eventually). 
  On this page i have a menu button that on click, shows/hides menu.</p>
  
  <p>Everything for the most part is working but, the problem is that when you click on the "back" button and the browser runs out of previous locations to go back to, the menu button breaks. When you click it, nothing happens. it behaves as though nothing is there.</p>
  
  <p>The errors go like this, if on index(or first page), you click ONE link to go forward, and then on the browser hit the back button, it breaks instantly. </p>
  
  <p>If your on the index, and hit for example, 5 links in any order(essentially you went forward 5xs) and thereafter, you hit <strong>back</strong> up to 4xs, the menu still works....you can essentially keep pressing links forward and be fine, hit back as far as you want and stop short one less than the total times you went forward and still be fine. </p>
  
  <p>As <strong>soon</strong> as you hit the maximum backs, and theres nothing left in the history of page locations to go back to, the menu then breaks.</p>
  
  <p>here is the link of this dummy site im working on (on my server)
  NOTE: <em>to test, when it loads, manually shrink the browser to about 400 width so you can see the page take effect.</em></p>
  
  <p>EDIT** woops forgot the link
  <a href="http://somdowprod.net/4testing/mobile/less1.html" rel="nofollow">http://somdowprod.net/4testing/mobile/less1.html</a></p>
  
  <p>and here is my code</p>
  
  <p>javascript:(i left comments in there, so you can see where my logic is at...maybe im going about it wrong?)</p>
  
  <pre><code>// JavaScript Document
  $(document).ready(function(){
  var newHash = "";
  var menuBtn = $('.leftButton');
  
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
      menuBtn.click( menuShowHide);
      //===========================//
  
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
      function menuShowHide(){
          $('#menu').toggleClass();
  
  //      if($('#menu').css("display") == "none"){
  //          $('#menu').css("display","block");
  //      }   else {
  //          $('#menu').css("display","none");   
  //      }
          scroll(0,0);    
      }
      //===========================//
  
  
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
          function isLoaded(){
              $('#progress').remove();    
          }
      //===========================//
  
  
  
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
          if(newHash == ""){
              $('body').append('&lt;div id="progress"&gt;Loading...&lt;/div&gt;');//attach this div which is made to look like a loading bubble.
              $('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
          }
      //===========================//
  
  
  
  
      //~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
      $('#menu a').click(function(){
          menuShowHide();
          window.location.hash = $(this).attr('href');
          return false; //doesnt let the link jump to a new page
  
      });
  
      $(window).bind('hashchange',function(){
          newHash = window.location.hash.substring(1);
          $('body').append('&lt;div id="progress"&gt;Loading...&lt;/div&gt;');//attach this div which is made to look like a loading bubble.
          $('#contentHere').load(newHash, isLoaded);
          //console.log(newHash); 
  
      });
  
      //===========================//
  
  
  
  });
  </code></pre>
  
  <p>Anyone have any ideas as to whats making the menu break? Thanks in advanced.</p>