Page flippers

joseph edited this page Sep 4, 2011 · 1 revision

Flippers are objects that follow a defined interface, and do the hard labour of actually turning the page. They typically listen for user interaction of some kind, then tell the reader that they are changing the page.

Flippers must be a 'class' (ie, instantiable via 'new') — the reader does the instantiation.

You can set the flipper as an option to the Reader initialization command, eg:

var reader = Monocle.Reader('someElementId', null, { flipper: MyFlipper });

Monocle comes with three built in flipper classes:

  • Monocle.Flippers.Slider - the animated, sliding page turns (default)
  • Monocle.Flippers.Scroller - text rolls across the screen, like a scroll
  • Monocle.Flippers.Instant - pages immediately change, without animation

Creating your own flipper

To create a new kind of flipper, your object must implement the methods and properties of the flipper interface. The flipper interface is as follows.

Constructor arguments:

  • reader


  • pageCount - must be an integer


  • addPage(pageDiv)
  • getPlace(pageDiv)
  • moveTo(locus)
  • listenForInteraction()