Projection mode test

Navigation between slides

How it works


To describe slides :

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

Slide title

To describe the title of a slide:

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


It's possible to define steps in slides:

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

Projection styles

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

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

Highlight the current step

How to highlight the current step ?

For instance:

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

Slide example

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

The slide manager