marcolago/flowtime.js

Flowtime.js HTML5/CSS3/JS Websites and Presentation Framework

Flowtime.js is a framework for easily building HTML presentations or An Amazing Website.

Documentation and Examples and much more information

Read the Documentation to discover how to use and customize your installation of Flowtime.js.

You can take a look at the sample presentation and to the examples folder to learn about the possibilities.

For more information check the wiki

• Browser Support
• Made with Flowtime.js
• Credits and Thanks

If You Find Flowtime.js Useful

If you used Flowtime.js to build a website, a webapp or a presentation, consider to do one or more of these things.

• Spread the word.
• Let me know where I can see your project (and tell me if I can add to the Made with Flowtime.js page).
• Open an issue to report a bug or to request a feature.
• If you wish to donate (thanks in advance):
  

Main Features

Full Page Fluid Layout Boilerplate. Flowtime.js is designed to perfectly fit your viewport and is based on a solid display: inline-block; foundation. This framework doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like. But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.

Alternate Horizontal Layout The default layout has sections arranged side by side horizontally and pages stacked vertically in each section. You can use the alternate layout with sections stacked vertically and pages arranged horizontally by adding the class ft-cross to the Flowtime element in the HTML document. See How to Build the Markup section for an example.

Multiple Controls Navigation. You can navigate through pages via links, keyboard, mouse, gestures or deep-linking. Links are managed using the href value targeting a formatted hash destination; see the demo's source code for more examples. Keyboard navigation is based on arrow keys with the Shift key as a modifier to jump over fragments or sections. See the command list below:

• Down or Up Arrows: navigate to the next or previous page. This is the main navigation action; the entire content is navigable using these keys only. If there are fragments in the page, every input shows or hides a fragment.
• Shift + Down or Up Arrows: navigate to the next or previous page jumping all the fragments.
• Left or Right Arrows: navigate to the previous or next section. By default the destination will be the page at the same index of the starting point (if you are at page 3 in the section 2 you will go to the page 3 in the section 3). If the same index does not exist the destination will be the highest available index (see Section Navigation Options for more options).
• Shift + Left or Right Arrows: navigate to the first page of the previous or next section.
• Page Up: navigates to the first page of the current section.
• Page Down: navigates to the last page of the current section.
• Home: navigates to the first page of the presentation/website.
• End: navigates to the last page of the presentation/website.
• ESC: toggles the overview mode.

Fragments Support. It’s possible to navigate fragments step by step in a page or jump directly to the next or previous page. You can hide or show every single fragment with special behaviour managed and styled by CSS classes, and you can even nest fragments.

Overview Mode. Overview mode allows you to look at the entire site/presentation structure in a single view or from a distant point of view (alternate version). When in overview mode you can navigate to a page by click on it or using the arrow keys and then pressing Return key.

History Management. Flowtime.js is built on top of the HTML History APIs so you can navigate using the browser’s back and forward buttons and deep-link a page for sharing. Flowtime.js is a client side only framework so if you want to do SEO you have to add server side logic to serve only the single page content to search engines. If the History APIs are not available the framework falls back to the hashchange event.

Transitions. Flowtime.js animates the page transition using native CSS3 transitions. Where transitions are not available (IE9) the page change will be done immediately but would work as expected.

Parallax Support Integrated native parallax support based on CSS3 transformations and configurable by adding data- attributes.

Browser Support Flowtime.js is tested and works on every modern desktop browser and IE9 and above. Where the basic support is not available the framework falls back to the native scrolling with anchor links, but the full page fluid layouts remain intact.

Read the Documentation to discover how to use and customize your installation of Flowtime.js.

flowtime.js's Issues

Google analytics code

Just as an fyi, this line throws for me:

function onNavigation(e)
        {
            _gaq.push(['_trackEvent', 'Flowtime', 'Navigation', cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")]);
Uncaught ReferenceError: _gaq is not defined

Speaker Notes

I'd like to be able to write and view speaker notes for each slide. Ideally, they'd work like PowerPoint/Keynote/Reveal.js and be a separate screen that shows the current slide, a smaller version of the next slide, current time, a timer, and the speaker notes I've written for a given slide, and they would change as I change slides

css background-size: cover not working in multiple slides

Hi Marco,

Thanks for this wonderful framework!

I am attempting to build a presentation in which different slides need to have perfect full page background image. I am currently using the css property background-size: cover. It's working only in the first slide. The rest of the slides don't display the images at all. It doesnt matter whether its the second page or the second section. Only the first page is shown. Both image links are fine.

I am using the following code:

        <div class="ft-section section-1">
            <div class="ft-page"><div style="background: url('http://localhost:3000/assets/img/mi1-stacked-0.png') no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover; position: relative; z-index: 9999; width: 100%; height: 100%; min-height: 100%;"></div></div>
            <div class="ft-page"><div style="background: url('http://localhost:3000/assets/img/aliens-bg.jpg') no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover; position: relative; z-index: 9999;  width: 100%; height: 100%; min-height: 100%;"></div></div>
            <div class="ft-page">Section 1 / Page 3</div>
            <div class="ft-page">Section 1 / Page 4</div>
        </div>

View of nearby columns and differentiated # columns view

Hi, is it somehow possible to get the flowtime.js to behave like in attached examples?

Layout questions

Hello @marcolago

Thanks a lot for this great plugin!

I would like to ask for an advice regarding layout structure:

I have a design where the slides are 80% the width of the screen, with a padding of 5% between each slides. The slides should appear centered, and the user should be able to see next and previous section. I understand this is not so difficult to do, I just made some test in codepen with different approaches, modifying .flowtime .ft-section .ft-page and the scale of the page. But I am unsure which one to use. I see for example that modifying .flowtime and adding some padding to .ft-page would help me to achieve that, but I am unsure if this is the best way to do it. Apparently modifying the section or a page width/height is not good as it messes up the navigation.
What would you recommend?

http://codepen.io/markku/debug/epoyrJ
http://codepen.io/markku/debug/megpjj
http://codepen.io/markku/debug/gayodB
http://codepen.io/markku/debug/KdYZxK

The second point, is that it would be important for this project to define the width of the slides, but not the height. In fact, ideally, the height should adapt to the content of the slide. So for example, if I have an image that is 1200px wide and 800px tall, and these 1200 cover the width of the slide, then that slide should have this height. If the next slide has an image that is 1200px wide and 600px tall, then this slide should be 600px height. Would this be possible? If so, how would you advice to build the structure and the style?

Here is a screenshot of what I have in mind:

<sub> tag not working

sup tag seems to work but not the sub tag. Tried looking at css but couldn't see.

How to disable scrolling of inactive ft-sections?

When I resize .flowtime to 75% both height and width I see that when I scroll up and down through my ft-pages, all the pages from the neighbor ft-sections also scrolls up and down.

This is a big performance drawback when building a presentation with more than 150 image slides, as all the sections within the presentation scroll when I scroll through the current section.

Would it be possible to disable the scrolling of the pages of the inactive fp-sections / pages? How?

auto move forward?

I'm curious ... is there a way to have the presentation move to the next slide after X seconds? And similarly, when at the end of the preso to loop back to the first page?

"Grid Navigation False Demo" is not doing what it claims to do

If I understand what this demo is supposed to do, i.e. pop to the top page of any section navigated to by the left or right arrows no matter what page you came from, well that is not what I'm seeing.

I'm seeing the 'default' behavior, move to the adjacent grid-square if present, or the last in the section moved to if absent.

Firefox 35.0.1 always swipes two slides.

Hi,
thanks for that great script. But I got one issue i can't fix so far. If i test it on Firefox 35.0.1 and also on the Firefox Developer Edition, the keyboard navigation works fine, but if i scroll, it always swipes two slides. It doesn't matter how carefull i scroll, it jumps from page one to page three or from page two to page four. It even doesn't matter in with section.
Chrome and Safari on Mac work great.

Do you habe any idea?

Thanks

Demo crashes on iOS

I realize these are not on the supported browser list but thought its worth noting that loading the demo on these devices/browsers results in immediate crash:

Mobile Safari (iPhone iOS 6.0.1)
Mobile Safari (iPad 2 iOS 6.0.1)

Link used: http://flowtime-js.marcolago.com/

Worth noting it did load on Mobile Safari iPad Mini using iOS 6.0.2

(Side note: scrolling seems to skip across a number of pages instead of just one...)

does not work in firefox 17 & 18 for mac

I have a Mac with Lion OS
works fine with chrome, but firefox 17 & now 18 the js does not work, it just seems to ignore the js, and I can pan and scroll to view the entire content.

Navigation questions

I have some very simple questions about navigation. Can you please take a look at this pen? http://codepen.io/anon/pen/MaqOBv

I want to go all the time to the Top slide of each section, and I set up the following Configurations:

Flowtime.scrollTheSection(true); 
Flowtime.gridNavigation(false);
Flowtime.nearestPageToTop(false);

1. If you navigate from Page 1 to Page 2, and when you are in Page 2 you go UP, you will end up in Page 1 / Slide 3. Is it possible to disable this functionality? Or to override it while choosing Flowtime.gridNavigation(false)?

2. Then I set up the option Flowtime.gridNavigation to false to always go to the first page of every section instead. This works for keyboard navigation but not for mouse wheel scroll. If you are in Page 3 /1 for example and go back with the mouse wheel, it will go to Page 2 / 3. Is this a bug? It would be great if all the navigation options would go to the Top when specifying this configuration.

Many thanks!

Scrolling down a container with mouse wheel

Hi @marcolago, I was looking into a way to scroll down on a container that has overflow text that's hidden. When I do it goes to the next page. I suppose I can just use the mouse and manually click and hold the scroll bar to move down, but it's just a little more intuitive to use your mouse wheel when your over the content that needs to scroll. Do you have any recommendations? Thanks in advance for your time and consideration.

Flowtime.updateNavigation() issues

Hi @marcolago, thanks for your wonderful plugin.

I have an urgent issue:

I am adding content dynamically via Ajax. Everytime I add or remove elements I call Flowtime.updateNavigation() to let flowtime know about my newly modified elements.

Flowtime.addEventListener("flowtimenavigation") is also needed while navigating but this event seems to be also called with updateNavigation().

If I want to add content via Ajax when for example e.prevSection == false, this fire and endless loop because the Flowtime.updateNavigation() seems to call the flowtimenavigation event and viceversa.

Is there a way to separate both?
Any advice would be appreciated.

numbered list start at specific number

Thanks for this wonderful framework, I'm thorougly enjoying it.
There seems to be an issue with starting a numbered list at a specific number (useful for continuing a numbered list on another slide). The HTML spec says it should be like the following:
< ol start="6">
< li>This should be numbered 6< /li>
< /ol>

But for some reason, flowtime.js doesn't recognize this and starts with number 1

Progress Indicator not working in examples

Of all the index.html files in the repo, the Progress Indicator only works in three of them: the demo at the top level, the example in the 'auto-id' folder, and the example in the 'native-zoom' folder.

For all the others, the Progress Indicator highlites the first rectangle and never moves no matter what section/page you are on.

Diff'd a working and non-working index.html, I don't see what could be causing this.

Tom

Feature request: customize scrollTimeout for mouse/touch scrolling

Is there a way to customize (or avoid) the scrollTimeout?
When you use keyboard or direct anchors, the transition is without delay/latency.
When you scroll using mouse wheel or touch, the transition has a delay/latency.
How to avoid or customize that delay/latency?

Overview click handling broken in IE9

In IE9 the click handling in "overview" (when press ESC, not the slide map at lower right) is broken because the slide gets activated only, if you click outside (more exactly below!) the "thumbnail" content, in the grey area, otherwise the click does nothing (for text content) or jumps to an url (link).

I think it is an IE9 related z-index/transparency click handling bug.

Open specific slide by default

Would it be possible to set up a starting slide that is not the slide #1?
If so, how to achieve this? Let's say I want to start my presentation at a slide with a particular id or class, rather than the first slide in the dom.

Thanks in advance!

how to detect if current page has a certain ID or class?

I have another question..
hopefully it will help somebody else and not only me.

How can I check if the current page is a specific page?
Let's say I add a custom class to my .ft-page, something like .home and I want to check if the current page is .home.

I wrote something like this, which gives me the right alert but only when I leave the page. Is there a better way? I want to know in which page I am as soon as I arrive.

    Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
      function onNavigation(e) {
          if ( $('.actual').hasClass('home') ) {
            alert("actual is home");
          }
      }

inpage Navigationlink dosn't work on touchdevices

Hello,

on touchdevices, Android PAD or iPad, the inpage Links (something) don't work.

fullscreen for web browsers affects view

In browser full screen view, the sizes of elements move out of view port.

gridNavigation(false) not working via touch

Hey,

if Flowtime.gridNavigation is set to false it works fine when using the arrow keys.
But it's not working when using swipe events. It still navigates to the same page level on the next section instead of moving to the first.

Great job!

Regards
Sascha

Disable going to the bottom of the prev slide

Hi marcolago,

is there a way to disable going to the last slide in the previous column, when I am in the first slide of the current column and the user press the "up" key or the up mouse scroll movement?

for example if I am currently in B1

[ A ] [ B ] [ C ]
[ 2 ] [ 2 ] [ 2 ]
[ 3 ] [ 3 ] [ 3 ]

The default behavior will be that I will go to A3 if I press the "up" key.
Can we optionally disable this and do nothing if the user is in the first slide of the current column and press up or up-mousewheel?

thanks a lot

Features: Or directions for my fork

I've got a fork, that at the moment differs only in the readme.md, but that mocks up a bit of what I want to do, along with some implementation ideas.

I'd be interested in whether you think this is doable along with any hints you might have, (js is not my best language).

It's here: https://github.com/tfer/flowtime.js

Tom

What is `useCapture` in the eventListener method?

Please add build instructions

It would be nice to list build requirements and add build instructions in the README.

It is possibile to prevent next section with down key?

Hi, there is a way to disable to go to the next section when i'm at the bottom af the current section. It is also possibile to disable the animation that happens (scroll to top) when I go to the next section?
Thanks

Disabling navigation

I'm working on a site with flowtime.js controlling the page navigation but we'd like to have something like

[1]
[2]
[3a][3b]
[4]
[5]

I've hacked the position of the side element it by doing this
[1][nil]
[2][nil]
[3a][3b]
[4]
[5]
But i only want to show 3b when I call a js fn, is there any way to prevent the scrolling to section 2 unless i explicitly load that page?

Flowtime script has to be in body, not head

I'm just starting to use Flowtime (thanks!), and have found that it doesn't work if the flowtime.min.js script is placed in the head of the HTML page, which took me a little while to figure out.

If this is expected/correct, maybe it could be put in the readme. :-)

Support for wireless presenters

Recently I wanted to use a Logitech R400 Presenter to control my presentation. Unfortunately the 'previous' and 'next' buttons of the tool get translated to 'PgUp' and 'PgDown', which Flowtime.js interprets as 'first page / last page in the current section'.

Maybe we should interpret 'PgUp' / 'PgDown' identical to 'Arrow up' / 'Arrow down' and use e.g. 'Ctrl PgUp' / 'Ctrl PgDown' for 'first page / last page in the current section'.

Feature: Fragments hidden only when first time visiting

I am new to flowtime.js. I have experience with latex-beamer. One feature of flowtime.js raised my attention is: Flowtime.fragmentsOnBack(true); However, it turns out this the same behaviour as in latex-beamer with overlays.

I was hoping the feature would mean if I have revealed a fragment it stays so till the end of my presentation.

Is it possible to add this fo flowtime.js. Something like Flowtime.keepAlwaysFragmentsOnOnceRevealed(Boolean false);

Event property e.prevSectionTitle?

Trying to display the title of prev or next section onNavigation as HTML.

Only succeeding to display boolean values for existing section:

Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
function onNavigation(e) {
    document.getElementById("up").innerHTML = e.prevSection;
}

Is there a property such as

e.prevSectionTitle

Or how could a achieve this in a different way?

Video support in Firefox

As far as I can see embedding a video from YouTube or Vimeo plays well in webkit browsers but not in Firefox (Windows and Mac). Do you confirm the issue? Is it real or it is just me? Are there any workarounds?

Thanks.

Is ist possible to move the first child of a section element after the last one and vice versa

I need to modify flowtime to act like a carousel. Is it possible to get this to work?

Is data-id needed?

I discovered something that deserves updating the documentation in specific cases:

Flowtime.js automatically sets the title in the browser’s tab on navigation reading it from the first h1 on the page. If you want to override a title, or use a different string instead of the heading content, you can set a data-title attribute to the page. You can add the data-title attribute both to ft-section and to ft-page elements; if a data-title attribute was found on a section it will be used to write the title in the browser tab with this schema

This makes the user think that the data-id field is optional. But is not really optional, is it?

While loading posts via Ajax right now, I realized that if I didn't include this data-id field, flowtime wouldn't know where was my actual post and it would add two .actual classes to the body. At the beginning I thought that was the issue, but later on I realized that it happened only when I would load a particular url without the #/1/1 at the end. The data-id field somehow makes the system know in which slide it is in case there is no #/1/1 at the end.

Feature request: PDF support

slidemote.js failing to load

Hi, Marco. I don't know what is for this js exactly, but on load page, browser keeps trying to download until timeout (domain not working), making annoying to see loading animation in the page's browser tab. I've removed the js load line in index.html and everything works fine.

Regards.

Feature request - Markdown support

Please add Markdown support to make writing slides easier

flowtime.min.js breaks navigation

I assumed that the flowtime.min.js file was simply a minified combination of brav1toolbox.js and flowtime.js. However, if I try to use it, the up/down navigation between sections does not work. (That is the only difference I can see between the two uses; everything else seems to work.)

The docs don't mention flowtime.min.js, and the demos use the 2 separate JS files, so I'm not sure if I'm doing something wrong or if something is broken.

Selecting a slide in "overview" mode, jumps to the slide after that slide

Select a slide in overview mode via cursor keys and enter, you will jump to the next slide, after the slideyou've selected (see here: http://flowtime-js.marcolago.com/).

That error doesn't occur if the slide is selected via mouseclick.

Pages taller than viewport: scroll within page, then scroll to next page?

If the content of a page (.ft-page) is long, it may end up being taller than the viewport (especially on small screens or when switching device orientation).

Is there a way to scroll/swipe (vertically) within the current page (.ft-page) and only scroll/swipe to the next page once scrolling has reached the top or bottom of the current page?

This would be fantastic for responsive websites using flowtime.

Can't swipe up on Mobile Safari (iPhone 4S - iOS 7.0.2)

I can swipe down and swipe right/left, but I am unable to swipe up (to go back to previous page/screen) on your demo site.

Browser = Mobile Safari
iOS = 7.0.2
Phone = iPhone 4S

iOS iphone height is not working properly

This issue exists on your demo as well as in our site:

See the top of the next page is visible? We've figured out that it loads with height 100% then the safari address bar goes away freeing up an additional 60px causing this issue. Any insights on fixing this?

Demo page crashes on Ipad Air

I was checking out the demo website of flowtime.js "http://flowtime-js.marcolago.com/" on Ipad Air (IOS 8.0). I am using google chrome (V43.0.2357.56).

It works mostly fine when I slide through pages. But when I move across pages using the navigation grid boxes (which is located at the right bottom corner of the page), chrome crashes after some time. I can reproduce this scenario repeatedly.

Sometimes I move across 2-3 pages using navigation grid and starts to slide pages again, chrome crashes again. This scenario happens very rarely. I observed this only once or twice.

(Pardon me for using the word 'Navigation grid' as I don't know what it is called. I hope the reader will understand what I am referring at)

Momentum scroll fix

I've just created a new branch to discuss the momentum scroll issue (#33)

https://github.com/marcolago/flowtime.js/tree/dev-momentum-fix-tentative

The default momentum scroll delay is set to 2000 milliseconds (4 times the default transition time).
It's possible to change this value using Flowtime.setMomentumScrollDelay(milliseconds); method.

This fix disable scrollwheel event parsing with a simple timeout just after the start of a scrollwheel event.
This means that you are not able to scroll two (or more) pages with two (or more) quick swipes on MagicMouse or TrackPad for the full delay time.

Please, test this version and let me know your feedbacks and share you ideas on how to fix the problem.

Thanks
marcolago

Stop vimeo (embedded) video when navigate to another page

Hi,

How can I make an Vimeo video stop playing or pause a video when navigating?

thanks in advance!

Is it possible to have multiple ft-section with the same data-id?

Is it possibly to use the same data-id in multiple ft-section or do they need to have necessarily a unique ID name?

I am having issues with a navigation I am building, when attempting to customize the URL and the hashtag of the page.

If I build the following markup:

        <div class="ft-section" data-id="section">
            <div class="ft-page" data-id="page-1">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
            <div class="ft-page" data-id="page-2">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
        </div>

        <div class="ft-section" data-id="section">
            <div class="ft-page" data-id="page-3">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
            <div class="ft-page" data-id="page-4">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
        </div>

        <div class="ft-section" data-id="section">
            <div class="ft-page" data-id="page-5">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
            <div class="ft-page" data-id="page-6">
                <h1>title</h1>
                <p>Lorem ipsum.</p>
            </div>
        </div>

and if I add the following navigation:

<ul>
        <li><a href="#/section/page-1">page-1</a></li>
        <li><a href="#/section/page-4">page-4</a></li>
        <li><a href="#/section/#/page-6">page-6</a></li>
</ul>

I am doing this, because I want the url of my slides to look like url.com/section/page-1 and url.com/section/page-2 etc when navigating through different slides. I would like the section to remain the same. But when I do that and define the same data-id for different sections, the navigation doesn't work and it stays in the same slide. Is this a bug?

And if not, how can I rewrite these section-ids, keeping the same url while navigating through different sections?

Thanks a lot

links to ft_page not working?

Hi Marco,
I am getting Uncaught Error: SyntaxError: DOM Exception 12 on line 1234 when clicking on a link to a slide.