Questions tagged [push.js]

Push

Push.js is the engine that connects Ratchet pages together with AJAX and the history api. Push.js is listening to all clicks on a page, so just make sure it's included and link something in your Ratchet project up.

<!-- A one.html link -->
<a href="two.html">Two</a>

This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.

Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: fade, slide-in, or slide-out.

<!-- An one.html link that animates to two.html -->
<a href="two.html" data-transition="fade">Two</a>

A working version of push:

<header class="bar bar-nav">
  <h1 class="title">Push</h1>
</header>
<div class="content">
  <div class="card">
    <ul class="table-view">
      <li class="table-view-cell">
        <a class="navigate-right" href="../two.html" data-transition="slide-in">
          Load new page with push
        </a>
      </li>
    </ul>
  </div>
</div>

Have a link you don't want to intercepted by push? Try this:

<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>

Push.js binds an event to the document that returns a detail object and can be used to fire a callback.

// Only needed if you want to fire a callback
window.addEventListener('push', myFunction);