Documentation

To make the user experience with page navigation even better, mAuthor makes it possible to define additional page navigation arrow buttons and a navigation bar that is displayed on the screen while viewing a presentation. Clicking or tapping anywhere on a presentation page, but its clickable elements, displays two arrow buttons on both sides of the screen - the left one for the previous page and the right one for the next page. Moreover, at the bottom of the page appears an additional panel with page icons.

Page Navigation Styling - Arrows

To enable this feature, it is necessary to add CSS styles to your presentation or template for the "ic_navi_panel_prev" and "ic_navi_panel_next" classes (for more information on templates go to Working with templates section). An example CSS style could look like this:

.ic_navi_panel_prev, .ic_navi_panel_next {
display: block;
width: 80px;
height: 80px;
background-color: rgba(187, 187, 187, 0.72);
background-image: url('/file/serve/6676260642095104');
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}

.ic_navi_panel_next {
background-image: url('/file/serve/6429970037473280');
}

.ic_navi_panel_prev:hover, .ic_navi_panel_next:hover {
background-color: rgba(187, 187, 187, 0.92);
}

Page Navigation Styling - Page Icon Toolbar

To enable this feature, add CSS styles to your presentation or template for the "ic_navi_panel_bar" class (for more information on templates go to Working with templates section). An example CSS style could look like this:

.ic_navi_panel_bar {
position: fixed;
height: 80px;
padding: 0px 20px 0px 20px;
background: #505050;
visibility: visible;
display: block;
color:white;
text-align:center;
opacity:1;
filter:alpha(opacity=100); / For IE8 and earlier /
animation:slideUp 1s ease;
-webkit-animation:slideUp 1s ease; / Safari and Chrome /
z-index:150;
}

Class "ic_navi_button" defines the layout of a single page button. If a presentation doesn't contain page preview files, the default icon will be used.

.ic_navi_button {
background-image: url('images/page.png');
background-size: 50px 60px;
background-repeat: no-repeat;
background-position: center;
margin-left: 0px;
margin-right: 0px;
height: 77px;
width: 60px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

To create more possibilities for navigation bar customization, two additional classes have been defined: "ic_navi_button-active" and "ic_navi_button-inactive".

Displaying Page Icon Toolbar on events

There is a possibility to disable the automatic displaying of the toolbar on the click event on an empty space on a page and enable it only on specific events e.g., click on the Double State Button. To do this we have to use the Advanced Connector module with this code:

EVENTSTART
Name:PageLoaded
Source:^((?!header|footer).)*$
SCRIPTSTART

     presenter.playerController.getCommands().setNavigationPanelsAutomaticAppearance(false);
     presenter.playerController.getCommands().hideNavigationPanels();

SCRIPTEND
EVENTEND

EVENTSTART
Source:Double_State_Button1
Value:1
SCRIPTSTART

     presenter.playerController.getCommands().showNavigationPanels();

SCRIPTEND
EVENTEND

EVENTSTART
Source:Double_State_Button1
Value:0
SCRIPTSTART

     presenter.playerController.getCommands().hideNavigationPanels();

SCRIPTEND
EVENTEND