### Starting Flowtime.js with Configuration Options
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/default/index.html
This example demonstrates how to start the Flowtime.js application with various configuration options enabled. It includes settings for progress display, navigation behavior, and history management.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
Flowtime.gridNavigation(false);
Flowtime.nearestPageToTop(true);
Flowtime.rememberSectionsStatus(true);
Flowtime.rememberSectionsLastPage(true);
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.js Initialization with Options
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/remember-sections-status/index.html
Demonstrates starting Flowtime.js with various configuration options, including enabling section status remembrance. This example also includes commented-out settings for other features.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// Flowtime.gridNavigation(false);
// Flowtime.nearestPageToTop(true);
Flowtime.rememberSectionsStatus(true);
// Flowtime.rememberSectionsLastPage(true);
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.js Configuration and Initialization
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/duplicated-id/index.html
This snippet shows how to configure Flowtime.js with various options and start the application. It also includes an example of an event listener for navigation events.
```javascript
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1228618-10']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// Flowtime.loop(true);
// Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
function onNavigation(e) {
}
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.js Configuration and Start
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/custom-backgrounds/index.html
This snippet shows how to configure Flowtime.js options and start the application. Use these options to customize presentation behavior.
```javascript
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1228618-10']); _gaq.push(['_trackPageview']); _gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
// // // Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// starts the application with configuration options
Flowtime.start();
// custom code here
```
--------------------------------
### Install Dependencies
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Installs project dependencies using npm. Ensure Node.js and npm are installed.
```bash
npm install
```
--------------------------------
### Flowtime.js Configuration and Start
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/custom-fragment-animations/index.html
Configures Flowtime.js with various options and then starts the application. Uncomment lines to enable specific features like progress display or history.
```javascript
// // // Configuration API test
// Flowtime.showProgress(true);
// // Flowtime.fragmentsOnSide(true);
// // Flowtime.fragmentsOnBack(true);
// // Flowtime.useHistory(false);
// // Flowtime.slideInPx(true);
// // Flowtime.sectionsSlideToTop(true);
// // Flowtime.gridNavigation(false);
// // Flowtime.useOverviewVariant(true);
// // Flowtime.parallaxInPx(true);
// // starts the application with configuration options
// Flowtime.start();
// // custom code here
```
--------------------------------
### Start Flowtime.js Application
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Starts the Flowtime.js application logic. This is optional but recommended unless custom options are being applied. If not called, Flowtime.js starts automatically but some configurations may only apply after the first navigation.
```javascript
Flowtime.start();
```
--------------------------------
### Flowtime.start()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Starts the application logic with custom options. This is optional but recommended unless configuration parameters are changed. If not called, Flowtime.js starts automatically, but some configurations apply only after the first navigation.
```APIDOC
## Flowtime.start()
### Description
Starts the application logic with custom options. Calling this method is optional (but highly recommended) unless you change some configuration parameters. If you doesn’t call the `start()` method Flowtime.js starts itself but some configuration parameters will be applied only after the first navigation action.
You can pass as optional parameters the same parameters that are accepted by the `gotoPage` method (see below) to let the presentation navigating to a specific page at start.
### Method
`Flowtime.start()`
### Parameters
Optional parameters accepted by the `gotoPage` method can be passed to navigate to a specific page at start.
```
--------------------------------
### Flowtime.js Event Listener and Start
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/overflow-scroll/index.html
Sets up an event listener for navigation events and starts the Flowtime.js application with default settings.
```javascript
// event management
Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
// starts the application with configuration options
Flowtime.disableNavigation(false, false, false, false);
Flowtime.start();
```
--------------------------------
### Start Flowtime.js Application
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/auto-id/index.html
Initializes the Flowtime.js presentation with default or configured options.
```javascript
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.js Configuration and Start
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/remember-sections-status/index.html
This snippet shows a comprehensive configuration for Flowtime.js, including enabling section status remembrance and starting the application. It also includes commented-out options for further customization.
```javascript
// Configuration used in this Flow:
Flowtime.gridNavigation(true); // default
Flowtime.nearestPageToTop(false); // default
Flowtime.rememberSectionsStatus(true);
Flowtime.rememberSectionsLastPage(false); // default
```
--------------------------------
### Configure Flowtime.js Options
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/video/index.html
Example of setting various configuration options for Flowtime.js, such as progress display, fragment behavior, and navigation.
```javascript
// // // Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
```
--------------------------------
### Flowtime.js Configuration Options
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/auto-id/index.html
Example of enabling various Flowtime.js features through its API. Uncomment lines to enable specific functionalities.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// Flowtime.loop(true);
```
--------------------------------
### Code Highlight Example
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/scroll-the-section/index.html
Demonstrates code highlighting using Prism.js. Includes a JavaScript function, CSS class, and an HTML heading.
```javascript
function saySomethingSmart()
{
alert("The bad craftsman blames his tools!");
}
```
```css
.is-not-water {
display: inline-block;
}
```
```html
The Bad Craftsman Blames His Tools!
```
--------------------------------
### Flowtime.js Configuration and Initialization
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/variable-height/index.html
This snippet shows how to configure and start Flowtime.js with various options. It includes Google Analytics tracking and specific Flowtime settings like slide transitions and navigation.
```javascript
var _gaq = _gaq || [];
//_gaq.push(['_setAccount', 'UA-1228618-10']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// Flowtime.loop(true);
Flowtime.scrollTheSection(true);
Flowtime.disableNavigation(false, false, true, false);
// // // starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Build Minified Flowtime.js
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Creates a minified build of Flowtime.js and autoprefixes CSS files using Grunt. Requires npm install to be run first.
```bash
grunt
```
--------------------------------
### Custom JavaScript Function
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/no-images/index.html
A sample JavaScript function demonstrating a basic alert. This can be used as a starting point for custom behaviors.
```javascript
function saySomethingSmart()
{
alert("The bad craftsman blames his tools!");
}
```
--------------------------------
### Autoplay Controls
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.play()` to start autoplay, `Flowtime.pause()` to pause it without resetting the delay, and `Flowtime.stop()` to stop and reset the delay.
```javascript
Flowtime.play();
```
```javascript
Flowtime.pause();
```
```javascript
Flowtime.stop();
```
--------------------------------
### Flowtime.getPrevPage()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the previous page HTML Element.
```APIDOC
## Flowtime.getPrevPage()
### Description
Gets a reference to the previous page HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getPrevPage();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the previous page HTML Element, or `null` if none exists.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### Get Global Navigation Transition Time
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the global navigation transition time in milliseconds.
```javascript
Flowtime.setTransitionTime(Number milliseconds);
```
--------------------------------
### Enable Flowtime.js with Grid Navigation Disabled
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/grid-navigation-false/index.html
This snippet shows the initialization of Flowtime.js with grid navigation explicitly set to false. It also includes commented-out examples of other configuration options and the necessary Google Analytics tracking code.
```javascript
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1228618-10']); _gaq.push(['_trackPageview']); _gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // Configuration API test Flowtime.showProgress(true); // Flowtime.fragmentsOnSide(true); // Flowtime.fragmentsOnBack(true); // Flowtime.useHistory(false); // Flowtime.slideInPx(true); // Flowtime.sectionsSlideToTop(true); // Flowtime.useOverviewVariant(true); // Flowtime.parallaxInPx(true); // Flowtime.clicker(true); Flowtime.gridNavigation(false); // Flowtime.nearestPageToTop(true); // Flowtime.rememberSectionsStatus(true); // Flowtime.rememberSectionsLastPage(true); // // starts the application with configuration options Flowtime.start();
```
--------------------------------
### Navigate Between Sections
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.prevSection()` and `Flowtime.nextSection()` to navigate to the previous or next section. The optional `top` parameter controls starting position within the section.
```javascript
Flowtime.prevSection([Boolean top]);
Flowtime.nextSection([Boolean top]);
```
--------------------------------
### Flowtime.getPage()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the current page HTML Element.
```APIDOC
## Flowtime.getPage()
### Description
Gets a reference to the current page HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getPage();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the current page HTML Element.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### Autoplay Control
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Control the autoplay timer for the presentation, including starting, pausing, and stopping.
```APIDOC
## Flowtime.play
### Description
Starts the autoplay timer with the configured or default values.
### Method
`Flowtime.play()`
## Flowtime.pause
### Description
Pauses the autoplay timer without resetting the delay.
### Method
`Flowtime.pause()`
## Flowtime.stop
### Description
Stops the autoplay timer and resets the delay.
### Method
`Flowtime.stop()`
```
--------------------------------
### Get Previous Section Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the previous section. Useful for comparing or transitioning from the previous section.
```javascript
Flowtime.getPrevSection();
```
--------------------------------
### Get Current Page Index
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Returns the zero-based index of the current page. Useful for tracking progress within a section.
```javascript
Flowtime.getPageIndex();
```
--------------------------------
### Get Previous Page Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the previous page. Useful for accessing content or state from the prior page.
```javascript
Flowtime.getPrevPage();
```
--------------------------------
### HTML Heading Element
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/cross-direction/index.html
An example of an HTML H1 heading element. This is typically used for the main title of a page or section.
```html
The Bad Craftsman Blames His Tools!
```
--------------------------------
### Section Navigation
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Navigate to the previous or next section. The `top` parameter controls whether to start at the first page of the section or attempt to maintain the previous section's page index.
```APIDOC
## Flowtime.prevSection
### Description
Navigates to the previous section. If the optional `top` parameter is `true`, the section starts at the first page. If `top` is `false`, it starts at the page with the same index as the previous section, or the last page if the index does not exist.
### Method
`Flowtime.prevSection([Boolean top])`
## Flowtime.nextSection
### Description
Navigates to the next section. If the optional `top` parameter is `true`, the section starts at the first page. If `top` is `false`, it starts at the page with the same index as the previous section, or the last page if the index does not exist.
### Method
`Flowtime.nextSection([Boolean top])`
```
--------------------------------
### Enable Navigation Looping
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Set to true to enable looping navigation for sections and pages, allowing users to return to the start from the end. This affects both section and page navigation.
```javascript
Flowtime.clicker(Boolean clicker);
```
--------------------------------
### JavaScript Function for Smart Alert
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/cross-direction/index.html
Example of a JavaScript function that displays an alert message. This is often used for utility functions or simple user feedback.
```javascript
function saySomethingSmart()
{
alert("The bad craftsman blames his tools!");
}
```
--------------------------------
### Get Next Page Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the next page. Useful for implementing features that require knowledge of the upcoming page.
```javascript
Flowtime.getNextPage();
```
--------------------------------
### Flowtime.getPageIndex()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets the index starting at 0 of the current page.
```APIDOC
## Flowtime.getPageIndex()
### Description
Gets the index starting at `0` of the current page.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getPageIndex();
```
### Response
#### Success Response
- **number**: The index of the current page (starts at 0).
### Response Example
```javascript
0
```
```
--------------------------------
### Flowtime.getSectionIndex()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets the index starting at 0 of the current section.
```APIDOC
## Flowtime.getSectionIndex()
### Description
Gets the index starting at `0` of the current section.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getSectionIndex();
```
### Response
#### Success Response
- **number**: The index of the current section (starts at 0).
### Response Example
```javascript
0
```
```
--------------------------------
### Flowtime.js Configuration Options
Source: https://github.com/marcolago/flowtime.js/blob/master/index.html
Demonstrates various configuration options for Flowtime.js, such as showing progress, enabling parallax effects, and controlling navigation behavior. Uncomment lines to enable specific features.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.fragmentsAlwaysOnOnceRevealed(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.backFromPageToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
Flowtime.parallaxInPx(true);
```
--------------------------------
### Flowtime.getNextPage()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the next page HTML Element.
```APIDOC
## Flowtime.getNextPage()
### Description
Gets a reference to the next page HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getNextPage();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the next page HTML Element, or `null` if none exists.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### Flowtime.js Configuration Options
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/variable-section-width/index.html
Demonstrates various configuration options for Flowtime.js, including progress display, slide transitions, and navigation behavior. Use these settings to customize the presentation experience.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.backFromPageToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
Flowtime.parallaxInPx(true);
// event management
// Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.getNextSection()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the next section HTML Element.
```APIDOC
## Flowtime.getNextSection()
### Description
Gets a reference to the next section HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getNextSection();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the next section HTML Element, or `null` if none exists.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### Flowtime.js Initialization and Configuration
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/cross-direction/index.html
This snippet shows how to initialize Flowtime.js and set various configuration options. It includes enabling progress display, parallax effects, and comments out other potential configurations.
```javascript
var cacheTitle = document.title.replace("Flowtime.js | ", ""); var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1228618-10']); _gaq.push(['_trackPageview']); _gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); // Configuration API test Flowtime.showProgress(true); // Flowtime.fragmentsOnSide(true); // Flowtime.fragmentsOnBack(true); // Flowtime.useHistory(false); // Flowtime.slideInPx(true); // Flowtime.sectionsSlideToTop(true); // Flowtime.gridNavigation(false); // Flowtime.useOverviewVariant(true); Flowtime.parallaxInPx(true); // // event management Flowtime.addEventListener("flowtimenavigation", onNavigation, false); function onNavigation(e) { _gaq.push(['_trackEvent', 'Flowtime', 'Navigation', cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")]); // console.log(cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")); cacheTitle = document.title.replace("Flowtime.js | ", ""); //console.log('section', e.section, 'sectionIndex', e.sectionIndex); //console.log('page', e.page, 'pageIndex', e.); //console.log('pastSectionIndex', e.pastSectionIndex, 'pastPageIndex', e.pastPageIndex); //console.log('prevSection', e.prevSection); //console.log('nextSection', e.nextSection); //console.log('prevPage', e.prevPage); //console.log('nextPage', e.nextPage); //console.log('fragment', e.fragment, + 'fragmentIndex', e.fragmentIndex); //console.log("isOverview", e.isOverview); //console.log('progress:', e.progress, 'total:', e.total); // var value = Math.round(e.progress * 100 / e.total); // console.log('Completion: ' + value + '%'); } // starts the application with configuration options Flowtime.start();
```
--------------------------------
### Flowtime.getPrevSection()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the previous section HTML Element.
```APIDOC
## Flowtime.getPrevSection()
### Description
Gets a reference to the previous section HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getPrevSection();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the previous section HTML Element, or `null` if none exists.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### Flowtime.js Configuration and Event Handling
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/native-zoom/index.html
Demonstrates setting up Google Analytics tracking, configuring Flowtime.js options, and handling navigation events. Use this for custom analytics and presentation behavior.
```javascript
var cacheTitle = document.title.replace("Flowtime.js | ", "");
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1228618-10']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
Flowtime.parallaxInPx(true);
//
// event management
//
Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
Flowtime.onNavigation(onNavigation);
function onNavigation(e) {
_gaq.push(['_trackEvent', 'Flowtime', 'Navigation', cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")]);
// console.log(cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", ""));
cacheTitle = document.title.replace("Flowtime.js | ", "");
//console.log('section', e.section, 'sectionIndex', e.sectionIndex);
//console.log('page', e.page, 'pageIndex', e.);
//console.log('pastSectionIndex', e.pastSectionIndex, 'pastPageIndex', e.pastPageIndex);
//console.log('prevSection', e.prevSection);
//console.log('nextSection', e.nextSection);
//console.log('prevPage', e.prevPage);
//console.log('nextPage', e.nextPage);
//console.log('fragment', e.fragment, + 'fragmentIndex', e.fragmentIndex);
//console.log("isOverview", e.isOverview);
//console.log('progress:', e.progress, 'total:', e.total);
// var value = Math.round(e.progress * 100 / e.total);
// console.log('Completion: ' + value + '%');
}
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Flowtime.getSection()
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Gets a reference to the current section HTML Element.
```APIDOC
## Flowtime.getSection()
### Description
Gets a reference to the current section HTML Element.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
None
### Request Example
```javascript
Flowtime.getSection();
```
### Response
#### Success Response
- **HTMLElement**: A reference to the current section HTML Element.
### Response Example
```javascript
// Example response (actual element will vary)
```
```
--------------------------------
### YouTube Player Initialization Callback
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/video/index.html
Callback function executed when the YouTube IFrame API is ready. It initializes the player instance.
```javascript
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('yt-player'); // the ID of the iframe that contains the YouTube Video
}
```
--------------------------------
### Navigate to First and Last Page
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.gotoHome()` to navigate to the first page of the presentation and `Flowtime.gotoEnd()` to navigate to the last page.
```javascript
Flowtime.gotoHome()
```
```javascript
Flowtime.gotoEnd()
```
--------------------------------
### Get Current Page Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the current page. Useful for page-specific DOM operations.
```javascript
Flowtime.getPage();
```
--------------------------------
### Flowtime.autoplay(Boolean status, [Number delay], [Boolean autostart], [Boolean skipFragments])
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Configures the autoplay feature. `status` enables/disables autoplay. `delay` sets the time between page navigations in milliseconds (default 10000). `autostart` determines if autoplay begins immediately (default `true`). `skipFragments` allows skipping fragments on page transitions (default `false`).
```APIDOC
## Flowtime.autoplay(Boolean status, [Number delay], [Boolean autostart], [Boolean skipFragments])
### Description
Sets the status of the autoplay feature. `status` parameter sets the autoplay flag to `true` or `false`, if `true` you can use `play()` and `pause()` functions to start and stop the autoplay. `delay` sets the time between the page navigation in milliseconds; the default value is 10 seconds (10000 milliseconds). If `autostart` is `true` the autoplay feature starts just right after this call (default `true`). `skipFragments` allows to go to the next page skipping all the fragments on the page (default `false`).
### Method
`Flowtime.autoplay(Boolean status, [Number delay], [Boolean autostart], [Boolean skipFragments])`
### Parameters
- **status** (Boolean) - Enables or disables the autoplay feature.
- **delay** (Number) - Optional - The delay in milliseconds between page navigations. Defaults to 10000.
- **autostart** (Boolean) - Optional - If `true`, autoplay starts immediately after this call. Defaults to `true`.
- **skipFragments** (Boolean) - Optional - If `true`, fragments are skipped during autoplay page transitions. Defaults to `false`.
```
--------------------------------
### Flowtime.js Configuration and Event Handling
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/sub-pages-demo/index.html
This snippet demonstrates configuring Flowtime.js options and setting up custom event listeners for navigation and clicks to manage sub-pages.
```javascript
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// event management
Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
function onNavigation(e) {
/**
* resets the sub pages status when navigating between pages
* but maintains the subpages status if was only triggered the overview mode
*/
if (!e.isOverview && e.pastPageIndex != e.pageIndex) {
var subs = document.querySelectorAll(".ft-page .sub-page")
for (var i = 0; i < subs.length; i++) {
Brav1Toolbox.removeClass(subs[i], "active");
}
}
}
// starts the application with configuration options
Flowtime.start();
Brav1Toolbox.addListener(document, "click", onClick);
Brav1Toolbox.addListener(document, "touchend", onClick);
function onClick(e) {
// use e.preventDefault to disable the hash change
e.preventDefault();
// caching of the current page and of the sub page
var p = Flowtime.getPage();
var subPage = p.querySelector(".sub-page");
// // sub page show logic
var t = e.target;
if (t.className.indexOf("sub-link") != -1) {
var subPage = p.querySelector(".sub-page");
Brav1Toolbox.addClass(subPage, "active");
}
// sub page hide logic
if (t.className.indexOf("sub-back") != -1) {
var subPage = p.querySelector(".sub-page");
Brav1Toolbox.removeClass(subPage, "active");
}
}
```
--------------------------------
### Navigate to First and Last Page of Current Section
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.gotoTop()` to navigate to the first page of the current section and `Flowtime.gotoBottom()` to navigate to the last page of the current section.
```javascript
Flowtime.gotoTop()
```
```javascript
Flowtime.gotoBottom()
```
--------------------------------
### Page and Fragment Navigation
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Navigate to the previous or next page or fragment. The `jump` parameter can be used to skip all fragments.
```APIDOC
## Flowtime.prev
### Description
Navigates to the previous page or, if there are fragments, to the previous fragment. If the optional `jump` parameter is `true`, all fragments will be jumped.
### Method
`Flowtime.prev([Boolean jump])`
## Flowtime.next
### Description
Navigates to the next page or, if there are fragments, to the next fragment. If the optional `jump` parameter is `true`, all fragments will be jumped.
### Method
`Flowtime.next([Boolean jump])`
## Flowtime.prevFragment
### Description
Navigates to the previous fragment.
### Method
`Flowtime.prevFragment()`
## Flowtime.nextFragment
### Description
Navigates to the next fragment.
### Method
`Flowtime.nextFragment()`
```
--------------------------------
### Navigate Between Pages or Fragments
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.prev()` and `Flowtime.next()` to move to the previous or next page or fragment. The optional `jump` parameter skips all fragments.
```javascript
Flowtime.prev([Boolean jump]);
Flowtime.next([Boolean jump]);
```
--------------------------------
### Toggle and Set Overview Mode
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.toggleOverview()` to switch between overview and page mode. `Flowtime.showOverview()` allows setting the overview mode to a specific state.
```javascript
Flowtime.toggleOverview([Boolean back]);
```
```javascript
Flowtime.showOverview(Boolean show, [Boolean back]);
```
--------------------------------
### Initialize Google Analytics
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/video/index.html
Standard JavaScript snippet for initializing Google Analytics tracking for the page.
```javascript
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1228618-10']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
```
--------------------------------
### Navigate Between Fragments
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.prevFragment()` and `Flowtime.nextFragment()` to navigate to the previous or next fragment within the current page.
```javascript
Flowtime.prevFragment();
Flowtime.nextFragment();
```
--------------------------------
### Get Next Section Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the next section. Useful for pre-loading or preparing content for the next section.
```javascript
Flowtime.getNextSection();
```
--------------------------------
### Flowtime.slideInPx(Boolean usePx)
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
If set to `true`, calculations for container translation are performed in pixels instead of percentages. This is useful for altering default section placement or when pages do not perfectly fit the viewport. Default is `false`.
```APIDOC
## Flowtime.slideInPx(Boolean usePx)
### Description
Default `false`. If true performs the calculation for the container translation in pixels and not in % values. Use true if you want to alter the default placement of the sections (i.e. setting `vertical-align` different from `top`) or in any case the pages does not perfectly fit the viewport (i.e. Safari for Windows with the `font-size: 0;` bug).
### Method
`Flowtime.slideInPx(Boolean usePx)`
### Parameters
- **usePx** (Boolean) - Determines whether to use pixel-based calculations for slide translations.
```
--------------------------------
### Get Current Section Index
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Returns the zero-based index of the current section. Useful for conditional logic based on section position.
```javascript
Flowtime.getSectionIndex();
```
--------------------------------
### Get Current Section Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Retrieves the HTML element for the current section. Use this to directly manipulate or inspect the current section.
```javascript
Flowtime.getSection();
```
--------------------------------
### Initialize YouTube IFrame API
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/video/index.html
Loads the YouTube IFrame Player API asynchronously. This is required to control YouTube videos programmatically.
```javascript
// // YouTube video management
// https://developers.google.com/youtube/iframe_api_reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
```
--------------------------------
### Flowtime.js Initialization with nearestPageToTop
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/nearest-page-to-top/index.html
This code initializes Flowtime.js with several configuration options, including 'nearestPageToTop(true)'. This ensures that when users navigate through sections, they are always taken to the top page of the next section.
```javascript
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1228618-10']); _gaq.push(['_trackPageview']); _gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]); (function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.useOverviewVariant(true);
// Flowtime.parallaxInPx(true);
// Flowtime.clicker(true);
// Flowtime.gridNavigation(true);
Flowtime.nearestPageToTop(true);
// Flowtime.rememberSectionsStatus(true);
// Flowtime.rememberSectionsLastPage(true);
// starts the application with configuration options
Flowtime.start();
```
--------------------------------
### Navigation Event - Current Page Progress
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
The sequential index number of the current page, starting at 0, provided by the `flowtimenavigation` event object.
```javascript
e.progress
```
--------------------------------
### Overview Mode
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Toggle or set the overview mode, which provides a view of all sections and pages.
```APIDOC
## Flowtime.toggleOverview
### Description
Toggles the overview mode, switching between overview and page mode. If the optional `back` parameter is `true`, toggling the overview mode when in overview does not navigate to the highlighted page but returns to the active page; defaults to `false`.
### Method
`Flowtime.toggleOverview([Boolean back])`
## Flowtime.showOverview
### Description
Sets the overview mode to the specified state. See `Flowtime.toggleOverview([Boolean back]);` for parameter details.
### Method
`Flowtime.showOverview(Boolean show, [Boolean back])`
```
--------------------------------
### Reveal Elements Step-by-Step with Fragments
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use the `ft-fragment` class to reveal single elements incrementally. Elements with this class appear on forward navigation and disappear on backward navigation.
```html
First Paragraph; this text is visible from start.
This paragraph shows up only when you navigate forward and disappears when you navigate back.
```
--------------------------------
### Configure Flowtime.js to Remember Last Page in Section
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/section-navigation-options/remember-sections-last-page/index.html
Set `Flowtime.rememberSectionsLastPage(true)` to enable this feature. This configuration is typically done before starting the Flowtime application.
```javascript
Flowtime.gridNavigation(true);
Flowtime.nearestPageToTop(false);
Flowtime.rememberSectionsStatus(false);
Flowtime.rememberSectionsLastPage(true);
```
--------------------------------
### Flowtime.showProgress(Boolean show)
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Controls the display of the default progress indicator, which shows a miniature of the structure with the current page highlighted. Clicking on a page thumb navigates to that page. The default is `false`. Calling this during navigation can impact performance.
```APIDOC
## Flowtime.showProgress(Boolean show)
### Description
Default `false`. Show the default progress when in page mode (the standard content navigation mode). The default progress is a miniature of the structure placed in the lower left corner with the current page highlighted. Clicking on a page thumb in the default progress indicator triggers the navigation to that page. The default value is false, so if you want to show the progress you have to call `Flowtime.showProgress(true);` and then start the presentation. Calling this API during the navigation causes the progress to appear or disappear manipulating the DOM so watch out for performance issues. You are not limited to the default progress indicator. If you want to build your own progress bar or another indicator with a custom logic you can listen for the navigation events and use the event properties (check out the event section).
### Method
`Flowtime.showProgress(Boolean show)`
### Parameters
- **show** (Boolean) - Determines whether to show the progress indicator.
```
--------------------------------
### Configure Page Navigation Keys
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
When set to true, PageUp and PageDown keys navigate to the previous and next page respectively, instead of the first and last page of a section. Useful for wireless presenters.
```javascript
Flowtime.setCrossDirection(Boolean cross);
```
--------------------------------
### Flowtime.onNavigation(callback)
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Sets a callback function to be executed every time Flowtime.js navigates.
```APIDOC
## Flowtime.onNavigation(callback)
### Description
If you prefer setting a callback instead of registering an event to get the navigation data object, you can use this method. The callback function will be called every time Flowtime.js navigates.
### Method
JavaScript Function Call
### Endpoint
N/A
### Parameters
- **callback** (function) - Required - The function to be called every time Flowtime.js navigates. This function receives the same navigation data object as the event handler.
### Request Example
```javascript
Flowtime.onNavigation(function(e) {
console.log("Navigation data received:", e);
});
```
### Response
#### Success Response
This method does not return a value, but it sets the navigation callback.
### Callback Data Object (passed to callback)
- **e.section** (HTMLElement) - The HTMLElement reference to the current section.
- **e.page** (HTMLElement) - The HTMLElement reference to the current page.
- **e.sectionIndex** (number) - The current section index starting at 0.
- **e.pageIndex** (number) - The current page index starting at 0.
- **e.pastSectionIndex** (number) - The previous visited section index starting at 0.
- **e.pastPageIndex** (number) - The previous visited page index starting at 0.
- **e.prevSection** (boolean) - `true` if there is a previous section.
- **e.nextSection** (boolean) - `true` if there is a next section.
- **e.prevPage** (boolean) - `true` if there is a previous page.
- **e.nextPage** (boolean) - `true` if there is a next page.
- **e.fragment** (HTMLElement) - The fragment itself as HTMLElement if the navigation targets a fragment, otherwise `undefined`.
- **e.fragmentIndex** (number) - The index of the current fragment starting at 0, otherwise `-1`.
- **e.isOverview** (boolean) - `true` if the overview mode is on, `false` otherwise.
- **e.progress** (number) - The current page sequential index number starting at 0.
- **e.total** (number) - The last page sequential index.
- **e.isAutoplay** (boolean) - The status of the autoplay feature.
- **e.isLoopable** (boolean) - `true` if Flowtime.js is configured for looping.
```
--------------------------------
### Navigate to Page Element
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Use `Flowtime.gotoPage(target)` to navigate to a specific page by providing an HTMLElement.
```javascript
Flowtime.gotoPage(HTMLElement target)
```
--------------------------------
### Flowtime.js Markup with Data Attributes for Titles and URLs
Source: https://github.com/marcolago/flowtime.js/blob/master/documentation.md
Example of Flowtime.js markup demonstrating the use of 'data-id' and 'data-title' attributes on sections and pages to customize browser tab titles and URLs.
```html
Heading Title
When navigating to this page the title will be "site name | Heading Title"
and the URL will be "http://site_URL/#/section-1/page-1/"
When navigating to this page the title will be "site name | Section 2 Title | Page 1 Title"
and the URL will be "http://site_URL/#/section-2/page-1/"
When navigating to this page the title will be "site name | Page Title"
and the URL will be "http://site_URL/#/section-3/page-1/"
```
--------------------------------
### Handle Flowtime Navigation Events
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/scroll-the-section/index.html
Sets up an event listener for 'flowtimenavigation' events to track user navigation within the presentation. It logs navigation details and updates the cache title.
```javascript
// event management
Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
function onNavigation(e) {
_gaq.push(['_trackEvent', 'Flowtime', 'Navigation', cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")]);
// console.log(cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", ""));
cacheTitle = document.title.replace("Flowtime.js | ", "");
//console.log('section', e.section, 'sectionIndex', e.sectionIndex);
//console.log('page', e.page, 'pageIndex', e.);
//console.log('pastSectionIndex', e.pastSectionIndex, 'pastPageIndex', e.pastPageIndex);
//console.log('prevSection', e.prevSection);
//console.log('nextSection', e.nextSection);
//console.log('prevPage', e.prevPage);
//console.log('nextPage', e.nextPage);
//console.log('fragment', e.fragment, + 'fragmentIndex', e.fragmentIndex);
//console.log("isOverview", e.isOverview);
//console.log('progress:', e.progress, 'total:', e.total);
// var value = Math.round(e.progress * 100 / e.total);
// console.log('Completion: ' + value + '%');
}
```
--------------------------------
### Flowtime.js Event Listener for Navigation
Source: https://github.com/marcolago/flowtime.js/blob/master/examples/no-images/index.html
Sets up an event listener for 'flowtimenavigation' events to execute a custom function.
```javascript
// event management
Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
```