title: How do I actually use history.js on my site
body: <p>I've read all the posts about history.js on stackoverflow including, <a href="https://stackoverflow.com/questions/7369043/cant-understand-history-js-need-it-simplified">this</a>, <a href="https://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate">this</a> and <a href="https://stackoverflow.com/questions/7777626/implementation-of-history-js">this</a> and at looked the <a href="https://github.com/browserstate/History.js" rel="nofollow noreferrer">source code</a> but as a newcomer to javascript/jquery I'm having trouble figuring out how to actually implement to have html 5 history support and fallback to support html4 browsers such as ie8/9. As I can appreciate the UX benefits from presenting consistent URL's as much as possible, how this solves deep linking and allows for bookmarking I want to implement but I get a bit lost when trying to actually use this on my site.</p>
  
  <p>After adding history.js script to my page</p>
  
  <p>The code to modify as I undertand it is:</p>
  
  <pre><code>    function(window,undefined){
  
      // Prepare
      var History = window.History; // Note: We are using a capital H instead of a lower h
      if ( !History.enabled ) {
           // History.js is disabled for this browser.
           // This is because we can optionally choose to support HTML4 browsers or not.
          return false;
      }
  
      // Bind to StateChange Event
      History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
          var State = History.getState(); // Note: We are using History.getState() instead of event.state
          History.log(State.data, State.title, State.url);
      });
  
      // Change our States
      History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
      History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
      History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
      History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
      History.back(); // logs {state:3}, "State 3", "?state=3"
      History.back(); // logs {state:1}, "State 1", "?state=1"
      History.back(); // logs {}, "Home Page", "?"
      History.go(2); // logs {state:3}, "State 3", "?state=3"
  
  })(window);
  </code></pre>
  
  <p>Is the <code>//Change our states</code> where all new code goes as this code just gives examples of the history controls?</p>
  
  <p>Or should I be writing my own code in place of this whole code block (I use jquery to help me at this point, given my newness to coding).</p>
  
  <p>I was reading this <a href="http://css-tricks.com/rethinking-dynamic-page-replacing-content/" rel="nofollow noreferrer">article</a> about dynamic content loading and trying to implement on my site(I can get this code to work but I know that it won't play well in ie8/9), but am having trouble trying to figure out how to combine with history.js </p>
  
  <p>Aslo, secondarily, I'm trying to figure out how history.js plays with modernizr?</p>
  
  <p>Is it a replacement for modernizr.history (where it does the testing and if there is no support for .js falls back to typical page loading) or would it function like this:</p>
  
  <pre><code>if (Modernizr.history) {
     //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
  } else {
     //code from above goes here? with function(window, undefined){...etc...  ?
  }
  </code></pre>