how to enable push.js ajax content loader with ratchet

Question

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.

score 12 · Accepted Answer · answered Jan 31 '13 at 08:13

12

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.

answered Jan 31 '13 at 08:13

doug

4,010
1
15
10

2

Now at: https://github.com/twbs/ratchet/blob/master/docs/assets/js/fingerblast.js – a10s Apr 15 '14 at 02:39

score 10 · Answer 2 · edited Apr 11 '16 at 03:32

10

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').

edited Apr 11 '16 at 03:32

Nick Mitchell

1,207
13
24

answered Mar 19 '13 at 23:17

ZenBalance

10,087
14
44
44

Glad you found it helpful. Had to dig into FingerBlast a bit the first time I used it in order to figure out how to get it to work! – ZenBalance Apr 06 '13 at 07:23
The url is dead, try this one: https://github.com/stephanebachelier/fingerblast.js – Nick Mitchell Apr 11 '16 at 01:39

score 3 · Answer 3 · answered Jan 30 '13 at 21:43

3

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

answered Jan 30 '13 at 21:43

chachra

769
6
7

score 2 · Answer 4 · edited May 28 '14 at 13:38

2

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

edited May 28 '14 at 13:38

Vinodh

5,262
4
38
68

answered Jan 15 '14 at 12:51

Mati Tucci

2,826
5
28
40

score 2 · Answer 5 · answered Jul 15 '14 at 12:19

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.

score 1 · Answer 6 · answered Aug 29 '14 at 20:59

1

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.

answered Aug 29 '14 at 20:59

joseadanof

11
3

score 1 · Answer 7 · answered Jun 07 '15 at 22:09

1

Use FingerBlast. Tried Chrome, Safari and it worked.

https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js

answered Jun 07 '15 at 22:09

dbKooper

1,035
10
17

score 0 · Answer 8 · answered Dec 24 '14 at 11:19

0

On Google Chrome you can use the developer console and emulate a mobile device with touch events https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events

answered Dec 24 '14 at 11:19

diegodalbosco

63
1
6

how to enable push.js ajax content loader with ratchet

8 Answers8

Linked