• F11 to switch to full screen mode
• Use spacebar, arrows, page up/down keys or mouse clicks to move to next slide or step
• FullerScreen 2.0 has a slideshow mode
• automatically triggered when slideshow information is present in the document
• no extra JS needed

• spacebar, arrows, page up/down keys
• mouse clicks
• slide manager with thumbnails (shift-F11)

• It's an extension to Firefox, the F11 key is your friend to turn it on
• uses only three extra META elements in the document
• uses CSS styles for the 'projection' media type

To describe slides :

• Insert a new META element in the HEAD of your document
• Make it have a name="slideselector" attribute
• Make the content attribute contain a CSS selector matching all slide elements

For instance: <meta name="slideselector" name="div.slide" />

To describe the title of a slide:

• Insert a new META element in the HEAD of your document
• Make it have a name="titleselector" attribute
• Make the content attribute contain a CSS selector matching the title of the slide in the context of a slide
• The title will be the aggregation of all text nodes in the element carrying the title

For instance: <meta name="titleselector" name="h4" />

It's possible to define steps in slides:

• Insert a new META element in the HEAD of your document
• Make it have a name="stepselector" attribute
• Make the content attribute contain a CSS selector matching the steps in the context of a slide
• Navigation in a given slide will, if there are steps matching the selector in that slide, go from step to step.

For instance: <meta name="stepselector" name="li.step" />

Use 'projection' styles that will be enabled only in FullerScreen mode:

• Create CSS style rules inside an @media rule

    @media projection {
      body { background-color: red;
      }
      div.slide {
        position: fixed;
        left: 5cm;
        right: 2cm;
        top: 1cm;
        bottom: 1cm;
        background: #d0d0d0;
      }

How to highlight the current step ?

• Have a style rule in your projection stylesheet for the special class __FSstep

For instance:

  @media projection {
    .__FSstep { color: red; }
  }

<div class="slide"><h4>Slides</h4>
  <div class="slidecontent">
    <p>To describe slides :</p>
    <ul>
      <li>Insert a new META element in the HEAD of your
          document</li>
      <li>Make it have a <code>name="slideselector"</code>
          attribute</li>
      <li>Make the <code>content</code> attribute contain
          a CSS selector matching all slide elements</li>
    </ul>
   <p>For instance: <code>&lt;meta name="slideselector"
      name="div.slide" /&gt;</code></p>
  </div>
</div>

• hit shift-F11 to toggle on/off
• or click on the slide manager icon in the status bar
• click on a thumbnail to show the slide
• click anywhere else to hide the slide manager

• the current slide is outlined in blue
• try it now !!!