NUKnightLab / TimelineJS3

TimelineJS v3: A Storytelling Timeline built in JavaScript. http://timeline.knightlab.com
Mozilla Public License 2.0
2.97k stars 620 forks source link

Implement hashchange events #278

Open dex3108 opened 8 years ago

dex3108 commented 8 years ago

Hi, first of all i just want to tell that i am not web developer i just like to experiment and learn new things so sorry if this is trivial question. I started working on small project in my free time and i worked with 2.x version for some time. Now that 3.x version is here i want to use it for several reasons. But now i have issue that i had with 2.x (friend helped me to solve it in 2.x). Issue is that links in drop down menu (separate JQuery element on page) wont go to slide. In 2.x solution was simple i just changed is_moving from false to true (in timeline-min.js) and links worked without issue. But in 3.x now i don't know what to do.

What can you recommend me to try to solve this issue? (I would ask my friend but he is really busy now and in the end you know this code better). Thank you in advance.

JoeGermuska commented 8 years ago

If you're using iframe embeds, this won't be possible. We could look into message passing, but it's not supported right now.

If you are instantiating the timeline directly in your page, then you can use the goTo(n) or goToId(id) methods on a timeline.

goTo(n) takes a zero-based index and goes to the slide in that position. If your timeline has a title, then the title is in position 0.

goToId(id) takes a string unique ID and goes to the slide with that ID. The supported way to explicitly set a slide's ID is to use the unique_id slide property in JSON. (This had been overlooked in the JSON format documentation but is now added.

Hope this clarifies things.

dex3108 commented 8 years ago

I enabled Unique IDs and they work. I get Unique URL hash based on event but if i all links in drop down menu timeline won't go to that event. That was same issue i had with 2.x version but fix for 2.x was simple and now drop down menu works and timeline goes to event without reloading page.

You can see it here:

Timeline 2.x version that works (when you click on link in drop down menu timeline goes to event) http://acinitiatesreboot.net78.net/AC_Initiates_2_drop.html

Timeline 3.x version (when you click on link in drop down menu only URL changes but timeline doesn't move) http://acinitiatesreboot.net78.net/Timeline.html

P.S. In second example only first 3 links in Desmond Files drop down are correctly linked for testing purposes. Also sorry for free host i am using it for testing if page ever goes live it will be hosted on much better paid host. And you will maybe need to reload page to get drop down menu js to work properly.

I hope that now you understand what is exact issue. Tnx.

JoeGermuska commented 8 years ago

Thank you for clarifying. We have not implemented hashchange events yet, although, now that you've drawn our attention to it, we will.

In the meantime, you could use the javascript methods described above in your menu change handler instead of just changing the location hash.