Navigation Events

Navigation Events make it easy to create a standard First/Last and Previous/Next interactive interface for navigating through a series of panels and frames. This is especially useful in tutorials and story-telling interfaces. Updated: 2014-07-18

Navigation Overview
Navigation Reserved Terms
Navigation Event Usage
Usage Example
Notes
Navigation Events Example LIVE

Navigation Overview

Navigation allows the creation of First/Last Previous/Next interactions on any elements. It is generally used for panel or object navigation using .hide.

Navigation Reserved Terms

NAV Literal

FIRST Command. Display the first element by ID in the navigation list

LAST Command. Display the last element by ID in the navigation list

PREVIOUS Command. Display the previous element by ID in the navigation list

NEXT Command. Display the next element by ID in the navigation list

Navigation Event Usage

A navigation event must be declared, named and have the IDs of the target objects to be navigated listed.

Navigation ID lists are comma separated with no space. This is critical.

There can be any number of Navigation Events defined which will all work independently.

FIRST, LAST, PREVIOUS and NEXT are commands used in any standard EVENT using the neutral syntax.

Each NAV command must be used exclusively in an Event Container. IE you cannot have FIRST and NEXT in the same Event Container.

When a viewport opens that contains NAV, the first element is displayed by default.

NAV nav-name id1,id2,id3,id4,id5

0 XX NAV nav-name FIRST

0 XX NAV nav-name LAST

0 XX NAV nav-name PREVIOUS

0 XX NAV nav-name NEXT

The built in behaviour of NAV is to hide all the listed IDs except the active one. There is no GOTO EVENT in this version.

Usage Example

<pre class="aie-events">
NAV panelnav panel1,panel2,panel3,panel4,panel5
EVENT firstpage id=first-button click
EVENTSTART firstpanel
0 XX NAV panelnav FIRST
EVENTEND firstpanel
EVENT prevpanel id=prev-button click
EVENTSTART prevpanel
0 XX NAV panelnav PREVIOUS
EVENTEND prevpanel
EVENT nextpanel id=next-button click
EVENTSTART nextpanel
0 XX NAV panelnav NEXT
EVENTEND nextpanel
EVENT lastpanel id=last-button click
EVENTSTART lastpage
0 XX NAV panelnav LAST
EVENTEND lastpanel
</pre>

This example assumes there is an XHTML structure containing five panel elements and four navigation elements.

All target navigation containers are give the reserved class hide, which by default has CSS properties: display: none; applied.

<div class="aco-layout">
    <div id="panel1" class="hide"><h1>Panel 1</h1></div>
    <div id="panel2" class="hide"><h1>Panel 2</h1></div>
    <div id="panel3" class="hide"><h1>Panel 3</h1></div>
    <div id="panel4" class="hide"><h1>Panel 4</h1></div>
    <div id="panel5" class="hide"><h1>Panel 5</h1></div>
    <div class="button-bar-rw">
        <button id="first-button">First</button>
        <button id="previous-button">Previous</button>
        <button id="next-button">Next</button>
        <button id="last-button">Last</button>
    </div>
</div>

Notes

Navigation is ID driven not class driven and can be applied to any element. They do not have to be panels for example. They could be any element combination positioned anywhere in the viewport and include animation.

A navigation event can be triggered from any other event. It does not have to be a defined button navigation structure as in this example.

Navigation can be created in a single direction and used for two display choices using first and last. This can be used as a substitute for TOGGLECLASS in some situations.

NAV Panel2Nav pan2f01,pan2f02,pan2f03,pan2f04,pan2f05
EVENT FirstPan2Frame id=pan2nav-first click
EVENTSTART FirstPan2Frame
0 XX NAV Panel2Nav FIRST
EVENTEND FirstPan2Frame
EVENT PrevPan2Frame id=pan2nav-previous click
EVENTSTART PrevPan2Frame
0 XX NAV Panel2Nav PREVIOUS
EVENTEND PrevPan2Frame
EVENT NextPan2Frame id=pan2nav-next click
EVENTSTART NextPan2Frame
0 XX NAV Panel2Nav NEXT
EVENTEND NextPan2Frame
EVENT LastPan2Frame id=pan2nav-last click
EVENTSTART LastPan2Frame
0 XX NAV Panel2Nav LAST
EVENTEND LastPan2Frame
EVENT Pan2FullScreen id=pan2-fullscreen click
EVENTSTART Pan2FullScreen
0 pan2 COMMAND ADDCLASS "fullscreen"
0 pan2-fullscreen COMMAND ADDCLASS "hide"
0 pan2-minscreen COMMAND REMOVECLASS "hide"
EVENTEND Pan2FullScreen
EVENT Pan2MinimizeScreen id=pan2-minscreen click
EVENTSTART Pan2MinimizeScreen
0 pan2 COMMAND REMOVECLASS "fullscreen"
0 pan2-fullscreen COMMAND REMOVECLASS "hide"
0 pan2-minscreen COMMAND ADDCLASS "hide"
EVENTEND Pan2MinimizeScreen

Navigation Events Example LIVE

Here we've got simple navigation example with 5 frames. You can navigate next/previous first/last from left right nav bar aears. You can also make this nav panel go fullscreen. You can have any kind of contents inside any frames. Images, audio/video, or interfactive content or something else. There is no resriction of anything. And of course look and feel of it is always customizable without any question.

frame 1

frame 1 caption

Fullscreen

<div class="panel-rw interactive-rw" id="pan1" title="Panel Interactive">
<div class="aie-nav-script-rw" title="AIE Panel Nav Script">
<pre class="aie-events">
NAV Panel1Nav pan1f01,pan1f02,pan1f03,pan1f04,pan1f05
EVENT FirstPan1Frame id=pan1nav-first click
EVENTSTART FirstPan1Frame
0 XX NAV Panel1Nav FIRST
EVENTEND FirstPan1Frame
EVENT PrevPan1Frame id=pan1nav-previous click
EVENTSTART PrevPan1Frame
0 XX NAV Panel1Nav PREVIOUS
EVENTEND PrevPan1Frame
EVENT NextPan1Frame id=pan1nav-next click
EVENTSTART NextPan1Frame
0 XX NAV Panel1Nav NEXT
EVENTEND NextPan1Frame
EVENT LastPan1Frame id=pan1nav-last click
EVENTSTART LastPan1Frame
0 XX NAV Panel1Nav LAST
EVENTEND LastPan1Frame
EVENT Pan1FullScreen id=pan1-fullscreen click
EVENTSTART Pan1FullScreen
0 pan1 COMMAND ADDCLASS "fullscreen"
0 pan1-fullscreen COMMAND ADDCLASS "hide"
0 pan1-minscreen COMMAND REMOVECLASS "hide"
EVENTEND Pan1FullScreen
EVENT Pan1MinimizeScreen id=pan1-minscreen click
EVENTSTART Pan1MinimizeScreen
0 pan1 COMMAND REMOVECLASS "fullscreen"
0 pan1-fullscreen COMMAND REMOVECLASS "hide"
0 pan1-minscreen COMMAND ADDCLASS "hide"
EVENTEND Pan1MinimizeScreen
</pre>
</div>
    <div class="title-bar-rw" title="Panel TitleBar">
        <h2><a href="#">Navigation Events Example LIVE</a></h2>
        <p>Here we've got simple navigation example with 5 frames. You can navigate next/previous first/last from left right nav bar aears. You can also make this nav panel go fullscreen. You can have any kind of contents inside any frames. Images, audio/video, or interfactive content or something else. There is no resriction of anything. And of course look and feel of it is always customizable without any question.</p>
    </div>
    <div class="frame-rw" id="pan1f01" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <h4><a href="#">frame 1</a></h4>
        </div>
        <div class="caption-bar-rw" title="Frame CaptionBar">
            <p>frame 1 caption</p>
        </div>
    </div>
    <div class="frame-rw hide" id="pan1f02" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <h4><a href="#">frame 2</a></h4>
        </div>
        <div class="caption-bar-rw" title="Frame CaptionBar">
            <p>frame 2 caption</p>
        </div>
    </div>
    <div class="frame-rw hide" id="pan1f03" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <h4><a href="#">frame 3</a></h4>
        </div>
        <div class="caption-bar-rw" title="Frame CaptionBar">
            <p>frame 3 caption</p>
        </div>
    </div>
    <div class="frame-rw hide" id="pan1f04" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <h4><a href="#">frame 4</a></h4>
        </div>
        <div class="caption-bar-rw" title="Frame CaptionBar">
            <p>frame 4 caption</p>
        </div>
    </div>
    <div class="frame-rw hide" id="pan1f05" title="Panel Frame">
        <div class="frame-body-rw" title="Panel FrameBody">
            <h4><a href="#">frame 5</a></h4>
        </div>
        <div class="caption-bar-rw" title="Frame CaptionBar">
            <p>frame 5 caption</p>
        </div>
    </div>
    <div class="panel-controls-rw" title="Panel Controls">
        <div class="nav-bar-rw nav-first-rw" id="pan1nav-first" title="Nav Bar First">
            <p>First</p>
        </div>
        <div class="nav-bar-rw nav-previous-rw" id="pan1nav-previous" title="Nav Bar Previous">
            <p>Previous</p>
        </div>
        <div class="nav-bar-rw nav-next-rw" id="pan1nav-next" title="Nav Bar Next">
            <p>Next</p>
        </div>
        <div class="nav-bar-rw nav-last-rw" id="pan1nav-last" title="Nav Bar Last">
            <p>Last</p>
        </div>
        <div class="panel-fullscreen-rw" id="pan1-fullscreen" title="Panel Fullscreen">
            <p>Fullscreen</p>
        </div>
        <div class="panel-minscreen-rw hide" id="pan1-minscreen" title="Panel Minimizescreen">
            <p>Minimize screen</p>
        </div>
    </div>
</div>