how to enable push.js ajax content loader with ratchet

i am trying to implement the push.js engine from ratchet:

http://maker.github.com/ratchet/#push

i downloaded the ratchet files from here:

http://maker.github.com/ratchet/ratchet.zip

and am using apache to serve all js, css and html. all files are in the same directory.

here is my one.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Include the compiled Ratchet CSS -->
    <link rel="stylesheet" href="ratchet.css">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>

  </head>
  <body>

  <!-- Make sure all your bars are the first things in your <body> -->
  <header class="bar-title">
    <h1 class="title">one.html</h1>
  </header>

  <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
  <div class="content">

    <ul class="list">
      <li>
        <a href="two.html">
          <strong>two</strong>
          <span class="chevron"></span>
        </a>
      </li>
    </ul>

  </div>

  </body>
</html>

and here is my two.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ratchet template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Include the compiled Ratchet CSS -->
    <link rel="stylesheet" href="ratchet.css">

    <!-- Include the compiled Ratchet JS -->
    <script src="ratchet.js"></script>

  </head>
  <body>

  <!-- Make sure all your bars are the first things in your <body> -->
  <header class="bar-title">
    <h1 class="title">two.html</h1>
  </header>

  <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
  <div class="content">

    <ul class="list">
      <li>
        <a href="one.html">
          <strong>one</strong>
        </a>
      </li>
    </ul>

  </div>

  </body>
</html>

how do i link these two files together?

it looks like push.js is included but when i clicking on the a href's does nothing.

i feel like i am missing something glaringly obvious about this implementation.

thanks for the help.

Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js should do the trick.

ZenBalance

Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.

You can use the Chrome flags as mentioned in earlier answers or your can use @fat's fingerblast.js that converts touch events to pointer events.

The fingerblaster.js file can be found here: https://github.com/stephanebachelier/fingerblast.js

IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):

<script type='text/javascript'>
    var fb = new FingerBlast ('body');
</script>

This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').

I asked the same question. Seems like it only works on ios / phones, not on the web browser.

See: https://github.com/maker/ratchet/issues/148

Mati Tucci

I found that Ripple Emulator works great with this "issue" (I think only is available on Chrome)

It's nice because you don't need to add another js library

Modern Firefox browsers have a web developer feature called "Responsive Design View". It allows you to view a web page in a smaller viewport to simulate use on a phone/tablet. It also allows you to simulate touch events. I found it particularly useful when working with Ratchet on a web app.

In Firefox, you can enable the Responsive Design View by going to Tools -> Web Developer -> Responsive Design View or using the hotkeys "option + command + m".

More information on the Responsive Design View can be found here.

You can download Chrome Canary and with Developer Tools click over Phone icon ( first one ) then select which mobile phone you want to emulate, you can even use Responsinator.com.

PushJS is embedded into ratchet.js.

Use FingerBlast. Tried Chrome, Safari and it worked.