Skip to content

Walkthrough

Jump to bottom
Filipe Fortes edited this page Aug 25, 2010 · 20 revisions

Walkthrough

Building a reading experience using play.js from scratch.

Content Sources

To avoid any licensing issues, all content used is in the public domain. Specifically, we make use of:

Step One: Get something on the screen

First, we create a simple HTML document to hold our content (full source):

  <!doctype html>
  <html>
    <head>
      <title>Down the Rabbit-Hole: Alice's Adventures in Wonderland</title>
      <link rel="stylesheet" href="style.css" />
      <link rel="resources" href="resources.html" />
      <script type="text/javascript" src="js/play.js"></script>
    </head>

    <body>
      <article>
        <!-- Content goes in here -->
      </article>
    </body>
  </html>

Important things to note:

  • Declare the HTML5 doctype: The XHTML doctype is also usable, as long as Quirks mode processing is not triggered
  • Link to resources file: This link element points to the resources file where we store the Chrome and Grids
  • Include the play.js script tag within the <head>: This is required in order to ensure the IE8 and below properly process HTML5 tags. Additionally, this improves the user experience by letting the library download scripts in resources in parallel.
  • Place content within an <article> tag: Any content outside the tag is ignored. You can use that in order to present to content to older browsers, if desired.

If you open up the file in your browser, you'll see the following unimpressive display:

/walkthrough/screenshots/step-1.png

Create Resources

I can imagine your disappointment when you see a bunch of plain text with web design straight from 1994. Play isn't doing anything here because we need to create Resources. Create a file called resources.html (full source):

  <!doctype html>
  <html>
    <body>
      <div class="chrome">
        <div class="viewer"></div>
      </div>

      <div class="grid">
        <div class="column"></div>
      </div>
    </body>
  </html>

First, we've created some bare bones Chrome, the UI that will host the pages of content. Then we created a very rudimentary Grid, the skeleton HTML that will be used to flow content across pages.

Before we see any results, we need to edit style.css and provide some sizing guidance (full sources):

  /* Used for temporary items that should never be visible */
  .offscreen {
    position: absolute;
    top: -200%;
    right: -200%;
    visibility: hidden;
  }

  /* Make sure seams aren't visible */
  .chrome, .viewer, .grid, .column {
    overflow: hidden;
  }

  body {
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
  }

  .chrome, .viewer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .grid {
    position: absolute;
    width: 320px;
  }

  .column {
    position: absolute;
    width: 300px;
    top: 0;
    bottom: 0;
    left: 10px;
  }

The contents of the file are almost identical to the Required CSS that needs to be present in any page that uses play.js. Aside from the required styles, we made sure that the chrome, viewer, grid, and column classes are all absolutely positioned, and given a non-zero size either through setting a width or by anchoring via positioning properties. If we hit refresh on our page now, we see the following:

/walkthrough/screenshots/step-1b.png

Our content is now being laid out in (boring) columns, and you can use the arrow keys, mousewheel, or swiping to move between pages.

Clone this wiki locally