timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

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:

CSS transition: | | | | |

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>
    […] 
    <script type="text/javascript" src="timesheets.js"></script>
  </head>
  <body>
    […] 
    <div id="banner" smil:timeContainer="seq" smil:repeatCount="indefinite">
      <img smil:dur="3s" src="images/dosbox.png"       alt="[…]"/>
      <img smil:dur="3s" src="images/gnote.png"        alt="[…]"/>
      <img smil:dur="3s" src="images/gpodder.png"      alt="[…]"/>
      <img smil:dur="3s" src="images/transmission.png" alt="[…]"/>
    </div>
    […]
  </body>
</html>

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