timesheets.js :: Basic Markup

HTML Markup

You’ll have to load our timesheet scheduler by adding this in the <head> section:

<script type="text/javascript" src="timesheets.js"></script>

The rotating banner itself is described as follows:

<div id="banner" smil:timeContainer="seq" smil:repeatCount="indefinite">
  <img smil:dur="3s" src="images/dosbox.png"       alt="relive the good old days"/>
  <img smil:dur="3s" src="images/gnote.png"        alt="100% free software, 0% hassle"/>
  <img smil:dur="3s" src="images/gpodder.png"      alt="simple, usable podcast consumption"/>
  <img smil:dur="3s" src="images/transmission.png" alt="a fast, easy and free BitTorrent client"/>
</div>

timeContainer

this turns the related HTML element into a Time Container:

seq: A seq container defines a sequence of elements in which elements play one after the other. That’s what we’re using here for this rotating banner.
par: A par container, short for "parallel", defines a simple time grouping in which multiple elements may play back at the same time.
excl: This defines a time container with semantics based upon par, but with the additional constraint that only one child element may play at any given time: if any element begins playing while another is already playing, the element that was playing is stopped.

repeatCount

number of iterations ("indefinite": run continuously)

dur

duration of each image

More information about time containers can be found in the timeContainer page.

CSS Markup

By default, our Timesheet scheduler will show each image by setting its smil attribute to "active". This allows to add CSS transitions, like the cross-fade effect in the above example — that is, if your browser supports it (Firefox 4+, Safari 4+, Opera 10.6+).

#banner img {
  position: absolute;
  top: 0;
  transition         : all 2s;
  -o-transition      : all 2s;
  -moz-transition    : all 2s;
  -webkit-transition : all 2s;
  opacity: 0;
}
#banner img[smil=active] {
  opacity: 1;
}

Other ways to show/hide child elements of a time container are described in the timeAction page.

Alternative Markup

All roads lead to Rome… our Timesheet Scheduler supports several markup variants for SMIL Timing and SMIL Timesheets. The following pages should show the exact same banner as here.

Inline Timing

inline SMIL: Very simple but non-standard.
That’s the kind of markup we’d like to see in the HTML5 spec some day. :-)
smil:* attributes: SMIL compliant but doesn’t pass the W3C validator. Requires XHTML: the document must be sent as application/xhtml+xml, which is incompatible with IE6, IE7, IE8.
smil-* attributes: Explicit but non-standard. Does not require XHTML.
This would be an appropriate way to integrate the SMIL Timing syntax into HTML5.
data-* attributes: Not SMIL compliant but passes the W3C validator. Does not require XHTML.
Warning: to be HTML5-compliant, data-* attributes have to be lowercase.

Timesheets

Timesheets are another way to use SMIL Timing in an HTML document. It’s comparable to CSS: you can use inline styles in your document or you can describe most of the presentation with internal or external stylesheets.

Internal Timesheets: SMIL compliant but doesn’t pass the W3C validator. Requires XHTML: the document must be sent as application/xhtml+xml, which is incompatible with IE6, IE7, IE8.
External Timesheets: SMIL compliant and passes the W3C validator. Does not require XHTML.

As for CSS stylesheets, using SMIL Timesheets instead of inline SMIL Timing allows to factorize some markup and reuse the same timesheet in several web pages. For instance, the External Timesheets page shows how to get a single timesheet that would work for any number of images in the banner.

Note

In these pages, the markup is described with smil: prefixes because we think it makes more sense that way; but under the hood we’re using data-* attributes instead, in order to be compatible with IE<9 and to pass the W3C validator.