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 not 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, an additional panel appears 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 the 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 the 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;
    animation: slideUp 1s ease;
    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