marcolago / flowtime.js

Flowtime.js HTML5/CSS3/JS Websites and Presentation Framework
https://marcolago.github.io/flowtime.js/
MIT License
1.34k stars 237 forks source link

Navigation questions #44

Closed kawof closed 8 years ago

kawof commented 9 years ago

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!

marcolago commented 9 years ago

Hi.

1) Using UP or DOWN keys you are navigating per pages and not per sections, so it’s correct that you go to the previous page that is the last of the previous section.

I could add a new option to force the navigation to go to the first page of the previous section, it should be an easy task.

2) Sorry, buy I’ve not understood your example. Could you please take a look at this simple demo http://codepen.io/marcolago/pen/GpXyNq and let me know what is your expected behaviour when navigate from sections with examples (i.e.: from s3p2 I press LEFT and I expect to…)?

Could you also tell me what do you mean with “back with the scroll wheel”?

In your example you write: “This works for keyboard navigation but not for mouse wheel scroll.” What key are you using to “go back”: UP or LEFT?

kawof commented 9 years ago

Hi,

1) Regarding this point, I would love to have the option to disable that behavior. If you could add a new option to force the navigation to go to the first page of the previous section it would be great.

2) I see, my apologizes for not being clear. Now I understand that I misunderstood how the navigation works. If the arrow keys "up" and "down" navigate through the pages and the "left" and "right" navigate through the sections, the mouse scroll can't emulate this behavior because it just have two options: "up" or "down" and that would be the same behavior as the page navigation.

I think that in the mouse scroll navigation works very well when the user is navigating from left to right. While using the mouse scroll I would go S1 P1 > S1 P2 > S2 P1 > S2 P2. But while navigating to backwards (from right to left) it does S2 P2 > S2 P1 > S1 P2 > S1 P2.

Would it be possible when navigating backwards to go S2 P1 > S2 P2 > S1 P1 > S1 P2 ?

If this is too complicated, I would be also happy with just having the point 1) with that option enabled.

Thanks a lot!

marcolago commented 9 years ago

Ok, for the first point I should have a working version soon, the hard part is choose a good name for the API :P

About the second point. You said that when navigating backward the behavior is S2 P2 > S2 P1 > S1 P2 > S1 P2. Do you mean S2 P2 > S2 P1 > S1 P2 > S1 P1?

If yes, it is correct. You scroll from page to page and from section to section in reverse order. What I don‘t understand is why you should go forward (S2 P1 > S2 P2) while you scroll back.

In your example you wrote the sequence: S2 P1 > S2 P2 > S1 P1 > S1 P2 that sound like:

Sorry but I really don’t understand this behavior or what you would to achieve.

I will let you know when the point 1 is solved. If you could explain your second need in a way I could understand I will do my best to fix it.

Thanks. marcolago

marcolago commented 9 years ago

Hi. I've just pushed to master the new backFromPageToTop new API. Have a look and let me know if is ok.

I'm waiting for more details about your second request. Maybe if you could build a demo from my previous codepen and give me the steps to better undertand your needs I could understand how to develop the feature.

Thanks marcolago

kawof commented 9 years ago

Hi @marcolago

Thanks a lot for the edit and the time! that fix is working fine.

Now you will think that I am a pain in the ass, but I have an extra question. http://codepen.io/anon/pen/OyBKRy http://codepen.io/anon/debug/OyBKRy

If you are in the page 1/a and you click in the yellow button "next page", you will be in Page 1/b and right next to it, you'll see "Page 2". That's good.

If you press the arrow key "right" you will go to the Page 2/a, but if you click in my yellow button that says "Next section", you will go to Page 2/b. Why?

Am I doing something wrong? I understand in the documentation that If I want to go to the top of every page or section I have to set the boolean as true, like Flowtime.nextSection(true) or Flowtime.next(true) This is working fine with my arrow keys, but not with my custom links.

I am going to build a demo for the previous second request, but to be honest I think right now I am bothering quite a lot. Please let me know if these are too many questions. I really appreciate your time.

marcolago commented 9 years ago

Ok, I got it! I’m really sorry but I have to admit that the documentation “was wrong”. I’ve implemented the prev and next section methods logic like if you hold the shift key (just like it works with the keyboard) but now I realize that it was not the right way.

I’ve fixed the issue with the last push to master and I tested it in this pen forked from your: http://codepen.io/marcolago/pen/JYejeL I’ve not touched your code, just linked the new Flowtime version, and everything runs fine.

Now the parameter force the right behavior and the shift key only work if used in combination with keyboard or trackpad scroll. Please, download the new version and stress test again.

Sorry for the inconvenience and thank you very much for pointing out this issue. No one ever noticed it before. Good job!

kawof commented 9 years ago

The codepen works great. I will test the script in my dev server. Many thanks again!!