Horizontal Timeline 2.0, a fully customisable jQuery plugin to create a dynamic timeline on the horizontal axis.
Home Page: https://www.horizontal-timeline.ycodetech.co.uk/
Describe the bug
After enabling mouse wheel option and when we scroll the mouse the timeline directly go to the end of the timeline date. It should be scroll smothly each timeine one by one.
Currently the Horizontal-Timeline 2.0 javascript module allows events to be added based upon Date or DateTime. However, these format are quite local depending. Not every country is utilizing a dd/mm/yyyy format. Some prefer dashes instead of slashes, others like to change the position of day and month numbers.
The ISO8601 Date and Time-format is documented with the Internation Standards Organisation (ISO) under number 8601 and was first published back in 1988.
This standard would allow us to write a Date and Time as yyyymmddTHHMMSS. And ofcourse several others as mentioned in the standard, please read on Wikipedia: https://en.wikipedia.org/wiki/ISO_8601.
This Date and Time format would allow us to more easily sort events based on time. as we can sort numerically instead of based on date/time property.
Also the use of ISO8601 would allow us to add events on the timeline without a before or after position value set, as the full event time clearly indicates where it should be placed. Only in the case of identical date and time this property would be useful.
I will add some suggestions on the implementation in the response below, to keep the feature request separated from the implementation discussion.
Hello, I have a problem with the timeline plugin, if I try to use the goTo object it duplicates my timeline, this is one of the examples provided to which I have added
the javascript code to jump directly to a certain date.
Anyone have an idea?
Thanks
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="css/horizontal_timeline.2.0_v2.0.5.2.css" rel="stylesheet" type="text/css">
<script src="js/horizontal_timeline.2.0_v2.0.5.3.js"></script>
</head>
<body>
<div class="horizontal-timeline" id="example">
<div class="timeline">
<div class="timeline-navigation" id="leftNav">
<a href="" class="fas fa-3x fa-chevron-circle-left scroll-left inactive"></a>
<a href="" class="fas fa-3x fa-arrow-circle-left prev inactive"></a>
</div>
<div class="events-wrapper touch-enabled">
<div class="events" style="width: 717.5px; transform: translateX(0px);">
<span class="filling-line" aria-hidden="true" style="transform: scaleX(0.0637863);"></span>
<a href="" data-horizontal-timeline="{"date": "16/01/2014"}" class="selected first" style="left: 0px; padding-left: 10px;">16/01/2014</a>
<a href="" data-horizontal-timeline="{"date": "23/05/2015"}" class="last" style="left: 400px;">23/05/2015</a>
</div>
</div>
<div class="timeline-navigation" id="rightNav">
<a href="" class="fas fa-3x fa-arrow-circle-right next"></a>
<a href="" class="fas fa-3x fa-chevron-circle-right scroll-right inactive"></a>
</div>
</div>
<div class="events-content">
<ol>
<li class="selected" data-horizontal-timeline='{"date": "16/01/2014"}'> // Event description here</li>
<li data-horizontal-timeline='{"date": "23/05/2015"}'> // Event description here</li>
</ol>
</div>
</div>
<script>
$('#example').horizontalTimeline({
dateIntervals: {
"desktop": 200,
"tablet": 150,
"mobile": 120,
"minimal": false
}
});
$('#example').horizontalTimeline('goTo', '23/05/2015');
</script>
</body>
</html>
Is your feature request related to a problem? Please describe.
I'm using eventListeners on the timelines date links to update DOM content from a javascript array, so don't need the selectedContent box.
Describe the solution you'd like
A parameter could be added like 'showContent' that can be set to false.
Describe alternatives you've considered
I've been trying to comb through the js and remove the content section, but I'm quite new to javascript so have been having some difficulty. Is this possible to do? Any help would be greatly appreciated.
Additional context
Add any other context or screenshots about the feature request here.
Is your feature request related to a problem? Please describe.
I would like a way to disable some of the navigation buttons, like prev/next.
Describe the solution you'd like
Options to specify which buttons to enable/disable.
[Requested via email on 19/06/2019]
First of all thank you for this great plugin!
I have a li that has more content than the previous divs. Somehow the tallest div maintains its height even if a li with much less content is selected, causing white space and content overflow. Am i using it wrong or is this a bug?
Describe the bug
The timline crashes if the text has <li> inside it
Is your feature request related to a problem? Please describe.
I was wondering whether there’s any way to stop the autoplay after one time, right now it plays it in a loop.
Describe the solution you'd like
An option to allow autoplay to stop after a defined amount of loops.
[Requested via email on 20/03/2020]
Is your feature request related to a problem? Please describe.
I'm going to use the timeline to present milestones (steps) of a project. So it could be used as a workflow tracker showing labels at each steps. It would be good to have a custom label instead of the date for the timeline.
[Requested via email on 23/07/2019]
Is your feature request related to a problem? Please describe.
If there is no initial content (list items with data-horizontal-timeline attribute), the script is thowing an error: "There are no events at this point in time. Please add some content.". My timeline is nested into a js accordion, which gets broken after this "error".
Describe the solution you'd like
My first idea: The mentioned scenario shouldn't thow an error, instead it should only display the error message in DOM.
Second idea: How about an additional option like "emptyTimelineText". This would be great for localization and custom project related output.
greetings =)
Is there any listener, which fires, when autoplay changes to next date or the user clicks on a date?
Would be nice to know, which date is currently selected.
Describe the bug
I'm encountering a strange issue in Safari browser on initialisation, with an error in the console thrown by jQuery (vers. 3.4.1)
Horizontal Timeline 2.0 Release Version:
Desktop (please complete the following information):
Errors:
unrecognized expression: link[href*="font-awesome"
Additional context
My initialisation code:
$(document).ready(function(){
$('#history-timeline').horizontalTimeline({
dateDisplay: "year",
useNavBtns: true,
useScrollBtns: false,
iconBaseClass: "far fa-3x",
scrollLeft_iconClass: "d-none",
scrollRight_iconClass: "d-none",
prev_iconClass: "fa-arrow-alt-circle-left",
next_iconClass: "fa-arrow-alt-circle-right"
});
})
[submitted via email on 27/09/2019]
I have integrated this timeline into one of my hobby projects and these are the issues and features I have integrated:
Issue: This style interferes with other code that allows a div to follow you when you scroll the page. html, body { overflow-x: hidden; }. I fixed this by removing the style and adding the following to _updateVisibleContent. Added $('html, body').css('overflow-x', 'hidden'); to the top, and $('html, body').css('overflow-x', 'auto'); to the end of the function.
Callback feature. I wanted to perform additional updates after the timeline has successfully scrolled to the new event. I added a new property to the settings JSON config called callback. At the end of _updateVisibleContent, I added if (this.settings.callback !== '') this.settings.callback(json); I track down the JSON and pass it to the callback. Here is that code in a nutshell without all of the null checks: JSON.parse(eventsContent[0].querySelector('li.selected').getAttribute('data-horizontal-timeline')):
) It would be great if there was a data property in the config where I can just pass in a JSON array of all the timeline events. This way, I don't have to build the ordered list for each item that needs a timeline view. I'll probably extend the code to do this for me at a later time.
Uncaught TypeError: this.init.addIdsAndClasses is not a function
at r.refresh (horizontal_timeline.2.0.min.js:11)
at r.addEvent (horizontal_timeline.2.0.min.js:11)
at HTMLDivElement. (horizontal_timeline.2.0.min.js:11)
at Function.each (jquery-3.3.1.js:354)
at jQuery.fn.init.each (jquery-3.3.1.js:189)
at jQuery.fn.init.e.fn. [as horizontalTimeline] (horizontal_timeline.2.0.min.js:11)
I am not sure if this is related any update of the library.
Is it possible to have a different autoplay speed for every event in the timeline?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.