title: how to enable push.js ajax content loader with ratchet
body: <p>i am trying to implement the push.js engine from ratchet:</p>
  
  <p><a href="http://maker.github.com/ratchet/#push" rel="noreferrer">http://maker.github.com/ratchet/#push</a></p>
  
  <p>i downloaded the ratchet files from here:</p>
  
  <p><a href="http://maker.github.com/ratchet/ratchet.zip" rel="noreferrer">http://maker.github.com/ratchet/ratchet.zip</a></p>
  
  <p>and am using apache to serve all js, css and html. all files are in the same directory.</p>
  
  <p>here is my one.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Ratchet template page&lt;/title&gt;
  
      &lt;!-- Sets initial viewport load and disables zooming  --&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  
      &lt;!-- Include the compiled Ratchet CSS --&gt;
      &lt;link rel="stylesheet" href="ratchet.css"&gt;
  
      &lt;!-- Include the compiled Ratchet JS --&gt;
      &lt;script src="ratchet.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;!-- Make sure all your bars are the first things in your &lt;body&gt; --&gt;
    &lt;header class="bar-title"&gt;
      &lt;h1 class="title"&gt;one.html&lt;/h1&gt;
    &lt;/header&gt;
  
    &lt;!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --&gt;
    &lt;div class="content"&gt;
  
      &lt;ul class="list"&gt;
        &lt;li&gt;
          &lt;a href="two.html"&gt;
            &lt;strong&gt;two&lt;/strong&gt;
            &lt;span class="chevron"&gt;&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my two.html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Ratchet template page&lt;/title&gt;
  
      &lt;!-- Sets initial viewport load and disables zooming  --&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  
      &lt;!-- Include the compiled Ratchet CSS --&gt;
      &lt;link rel="stylesheet" href="ratchet.css"&gt;
  
      &lt;!-- Include the compiled Ratchet JS --&gt;
      &lt;script src="ratchet.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;!-- Make sure all your bars are the first things in your &lt;body&gt; --&gt;
    &lt;header class="bar-title"&gt;
      &lt;h1 class="title"&gt;two.html&lt;/h1&gt;
    &lt;/header&gt;
  
    &lt;!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) --&gt;
    &lt;div class="content"&gt;
  
      &lt;ul class="list"&gt;
        &lt;li&gt;
          &lt;a href="one.html"&gt;
            &lt;strong&gt;one&lt;/strong&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>how do i link these two files together? </p>
  
  <p>it looks like push.js is included but when i clicking on the a href's does nothing.</p>
  
  <p>i feel like i am missing something glaringly obvious about this implementation.</p>
  
  <p>thanks for the help.</p>