Documentation

To make user experience with page navigation even better, mAuthor makes it possible to define additional page navigation arrow buttons and a navigation bar that are 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 previous page and the right one for 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 "ic_navi_panel_prev", "ic_navi_panel_next" classes (for more information on templates go to Working with templates section). An example CSS style should 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 "ic_navi_panel_bar" class (for more information on templates go to Working with templates section). An example CSS style should 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 automatic displaying the toolbar on click event on an empty space on a page and enable it only on specific events e.g. click on Double State Button. To do this we have to use 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