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

• spacebar, arrows, page up/down keys to move between slides/steps
• top and end keys to move to first/last slide
• move your mouse pointer to the bottom-right of the screen to show the joystick
• slide manager with thumbnails

• 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" content="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" content="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" content="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>

• move the pointer to the bottom-right of the screen to make it appear
• left arrow moves to previous slide/step
• right arrow moves to next slide/step
• up arrow moves to first slide
• down arrow moves to last slide
• the on/off buttons makes Firefox exit full screen mode
• the center button shows and hides the slide manager
• try it now !!!

• insert whereever you want an empty element of class __FScounter that will contain the current slide's index
• insert whereever you want an empty element of class __FStotal that will contain the total number of slides in the show

For instance:

<div class="footer">
  <span class="__FScounter" /> / <span class="__FStotal" />
</div>

• hit shift-F11 to toggle on/off or use the joystick
• use arrow and page keys to navigate between thumbnails
• click on a thumbnail to show the slide or hit the CR key
• click on the center of the joystick to close the slidemanager w/o chosing a slide or hit the ESC key
• the current slide is outlined in red while the selected slide is outlined in blue
• try it now !!!