timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

recommended markup (HTML5-valid): data-* attributes | external timesheet
supported variants: inline SMIL | smil-* attributes | smil:* attributes | internal timesheet

A simple use case is to define an HTML rotating banner. Here’s an example, blatantly stolen from PortableLinuxApps.org but described with pure SMIL attributes:

HTML Markup

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:smil="http://www.w3.org/ns/SMIL">
  <head>
    […] 
    <smil:timesheet>
      <smil:seq repeatCount="indefinite">
        <smil:item select="#banner img" dur="3s"/>
      </smil:seq>
    </smil:timesheet>
    <script type="text/javascript" src="timesheets.js"></script>
  </head>
  <body>
    […]
    <div id="banner">
      <img src="images/dosbox.png"       alt="relive the good old days"/>
      <img src="images/gnote.png"        alt="100% free software, 0% hassle"/>
      <img src="images/gpodder.png"      alt="simple, usable podcast consumption"/>
      <img src="images/transmission.png" alt="a fast, easy and free BitTorrent client"/>
    </div>
    […]
  </body>
</html>

SMIL compliant but doesn’t pass the W3C validator. Requires XHTML.

'select'

Note that the select attribute above performs a querySelectorAll() action: for each DOM node that is matched by the "#banner img" selector, a SMIL item is created.

This allows to reuse the same timesheet for several HTML pages: the SMIL markup above always works for any number of images in the banner.

'beginInc'

'beginInc' is the other <item>-specific attribute defined in the SMIL Timesheets spec. It's rather used with par and excl time containers, e.g.:

<smil:timesheet>
  <smil:excl>
    <smil:item select="#banner img" beginInc="3s" />
  </smil:excl>
</smil:timesheet>

This timesheet would be equivalent to the one we use for this file.