### 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); ```