Implementing Slides

Help content can include slides that present multiple images and content-blocks within the same page without a page reload. Slides come with Previous and Next buttons and a jump drop-down so users can navigate directly to any step.

Basic slide structure

Wrap all slides in a <slides> block. Each individual step is a <slide> element carrying an info attribute that becomes the label shown in the jump drop-down.

html

<slides>
    <slide info="Step 1 - Open the menu">
        <li>Click the file menu to open the main options.</li>
        <img src="...images/step1.gif">
    </slide>
    <slide info="Step 2 - Save your work">
        <li>Choose Save from the drop-down.</li>
        <img src="...images/step2.gif">
    </slide>
</slides>

Animated GIFs

Place an <img> inside a <slide> to show an animation. The engine automatically wraps the image in a container and restarts the GIF from frame 1 every time the slide becomes visible, so users always see the animation from the beginning when they navigate to that step.

Timed overlays

Place <overlay> tags immediately after an <img> to show caption bands at precise moments during the animation. The engine converts each <overlay> into a positioned text panel that fades in and out over the image.

html

<img src="http://centos-methodfish.com/demo/MFScreenHelp/beta/demo/help/images/myanim.gif">
<overlay from="0"    duration="4000" class="bottom">
        Step 1 - the panel opens</overlay>

<overlay from="4000" duration="4000" class="bottom"
        >Step 2 - select the item</overlay>

<overlay from="8000" duration="3000" class="top"   >
        Step 3 - confirm the choice</overlay>

The three attributes on <overlay> are:

• from : milliseconds from the moment the GIF restarts before this overlay appears; this can be in milliseconds (1234) or seconds (1s)
• duration : how long in milliseconds the overlay stays visible; this can be in milliseconds (1234) or seconds (1s).
• class : position on the image, bottom (default), top, or middle.