title: Single page application routing w/ Crossroads & Hasher, by example
body: <p>I am trying to write my first single-page application. The idea is to have 1 HTML file that contains many <code>&lt;div&gt;</code> tags; where each <code>&lt;div&gt;</code> represents a single web "page". Then the application just shows 1 <code>&lt;div&gt;</code> at a time, and hides the others. In this way, as users navigate my app, I'm really just showing/hiding different "page" divs, and giving the illusion of a single page app.</p>
  
  <p>Additional requirements are:</p>
  
  <ul>
  <li>This is an HTML5 app</li>
  <li>Each page div must map too its own bookmarkable URL (<code>http://myapp.example.com/#fizz</code>, <code>http://myapp.example.com/#buzz</code>, etc.)</li>
  <li>Singe each page div is bookmarkable, the app must work with the HTML5 history api</li>
  </ul>
  
  <p>I decided on using Crossroads for routing, and Hasher for History. The other lead contender was AngularJS, but in the end I decided against AngularJS because it was too heavyweight for what I'm trying to do here, and seemed to have a steeper learning curve associated with it.</p>
  
  <p>So far, my project has the following directory structure:</p>
  
  <pre><code>myapp/
      index.html
      myapp.js
      myapp.css
      signals.min.js          &lt;-- Required by both Crossroads and Hasher
      crossroads.min.js
      hasher.min.js
  </code></pre>
  
  <p>The JSFiddle containing my <code>index.html</code>, <code>myapp.css</code> and <code>myapp.js</code> files is here:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/Sxfms/2/" rel="nofollow">http://jsfiddle.net/Sxfms/2/</a></p>
  </blockquote>
  
  <p>The idea is that the user can click one of the links in the "navbar" ("Home", "About", "Contact") and be brought to the "page" (div) representing that particular page.
  As you can see, the default "page" should be <code>HOME</code>, meaning this is the only div you should be able to see. But all the page divs are visible, and none are hidden. And until I can get the page divs showing/hiding correctly, I can't really test routing/history functionality. Have I configured Crossroads/Hasher wrong somehow?</p>