Click the button below to download HistropediaJS and get started.
If you're interested in using HistropediaJS for a commercial project, feel free to download and test HistropediaJS as much as you like but please contact us to discuss an appropriate licence before publishing any work online.
We hope you enjoy!
Content of Download
This download package includes the latest version of Histropedia.js (normal and minifed), the 2 required dependencies and a HTML example page.
Documentation
See the documentation page for a description of all the options available and instructions on getting started, or the examples page for live demos of various settings.
Licence Agreement and Download
By downloading and using this software, you acknowledge your understanding and acceptance of the HistropediaJS Non-Commercial Licence Agreement. Please read this carefully before you proceed.
Release blog post Newsletter announcement
Feature | Details |
---|---|
Huge timeline redraw performance boost! |
changed Timeline redraw has been significantly restructured to optimise performance. Previous versions hit performance issues on slower devices above around 10,000 events on the timeline. This is now up to 30,000 events, and can go considerably higher with the right settings! To top off the good news, the worst performing browsers have had the biggest improvement. So performance is now very consistent among all major browsers, with no need to set browser specific timeline options.
There is a new |
Article Hover Style Article style options |
new The
new |
.setHoverStyle() Article method |
new Set an individual article's hover style any time after initialisation. |
.requestRedraw() Timeline method |
new This method allows you to request a redraw of the timeline, optionally specifing any built-in or custom redraw function to use. The redraw will be called directly or integrated into an animation if one is ongoing. This is now the recommended way to redraw the timeline as it gives the best performance.
NOTE: All previous timeline redraw functions can still be used
normally,
and have some performance improvements even without switching to
|
.repositionRedraw() Timeline method |
new New
timeline redraw function with a good balance of functionality and performance.
It performs the same steps as the basic
NOTE: The most complete (and slowest) redraw is still
|
.goToPixelAnim() Timeline method |
new
Similar to |
Text alignment for article title and subtitle Article style options |
new New
text |
Hide article subheader when height = 0 Article style options |
new
Disable drawing of the entire
subheader by setting |
onRedraw event Timeline options |
new New event which fires when each timeline redraw has been completed, with handlers registered in your timeline options. The handler function has access to the canvas context and timeline state, so this feature is ideal for adding custom drawings to the timeline canvas. |
Shift BCE dates by 1 year Timeline options |
new By
setting
This allows you to use data with either the |
Allow function for draggingVicinity Timeline options |
changed The
|
Allow function for autoStacking topGap Timeline options |
changed The
|
Increase default mousewheel zoom speed Timeline options |
changed
The default |
Changed default mainLine size Timeline options |
changed
The default |
Bug fixed | Details |
---|---|
Internet Explorer support lost in recent versions |
Compatibility with Internet Explorer 11 and various other older browsers has been restored. |
Timeline doesn't load if title missing in article data |
The |
Timeline.setStartDate not using date fractions |
When attempting to set a date that does land on a timeline marker, the fraction of the marker was not being calculated. This is now corrected, so the position reached on the timeline is correct to the pixel level. |
Bug fixed | Details |
---|---|
goToDateAnim not working with new zoom logic |
The goToDateAnim timeline method was not functioning after the update to new zoom logic
in v1.1.0, but should now be working better than ever. Apologies for missing this one in
the last release! |
Use transparent instead solid white for period line toPresent fade | The fading effect used to show period lines that are toPresent has been changed to transparent white as the end color in the gradient. This means it now displays correctly over any background colour/image. |
Fit the toPresent fade within period line length instead of adding to the end | This fixes the issue with toPresent period lines appearing to end at different dates depending on zoom level. |
Release blog post Newsletter announcement
Feature | Details |
---|---|
Cosmic timescales! |
new The
previous maximum zoom out would allow you to see around 20,000 years on the screen at
one time. The latest release gives this a massive boost, up to around 15 billion
years! The default zoom.maximum setting in the Timeline options has increased to 123, which is the new maximum possible zoom level. There are also 3 new precision levels available when defining start and end dates in the Article options:
|
'Geometric' zoom logic |
changed The new
logic makes zooming on the timeline completely consistent across all zoom levels. Apart
from just looking much nicer when zooming in or out, this change makes it significantly
easier to make geometric calculations based on zoom level (a new collection of functions
coming soon for this!). Important You may need to adjust the zoom settings in your Timeline options when you upgrade to v1.1.0 |
Built in Pinch to zoom |
new Pinch to Zoom is now built into HistropediaJS, so you don't need to use custom code or an external library for this gesture anymore. |
Separate style controls for Major and Minor date markers and labels Timeline options |
changed The style.marker and style.dateLabel sections in the Timeline options now contain major and minor subsections. This gives separate control over the style of each type of marker/label. The default options have been changed to make use of the extra controls. |
New styling options for date labels Timeline options |
new 3 new
options have been added to the style.dateLabel section in the Timeline
options. The new options listed below can be used for both minor and major date
labels:
|
Default 'hidePeriodLine' setting for all Articles Timeline options |
new
article.periodLine.defaultHide Timeline option
which allows you to set the default value for the hidePeriodLine Article option.
This lets you to quickly control visibility of period lines for the whole timeline at
once. Allowed values are the same as the corresponding Article option: true / false / function(article) { ...code returning true/false... } |
New section and size option for Article 'star' icon Timeline options |
new article.star Timeline options section, with 'width' property for controlling the size of the small star icon shown in Event Card headers. The previous article.starMargin option has also been moved to the new section, now found at article.star.margin |
Enable/disable draggable Articles Timeline options |
new article.draggable Timeline option which allows you to enable/disable the end user's ability to drag Articles to new positions on the timeline canvas. |
Enable/disable user control Timeline options |
new
article.enableUserControl Timeline option
which can be set to false if you need to disable the end user's ability
to interact with the timeline. At present, this setting can only be used in the options
you define before intialising your timeline. |
Enable/disable automatic mouse cursor Timeline options |
new
article.enableCursor Timeline option
which can be set to false if you need to disable the automatic cursor
CSS changes when the end user interacts with the timeline. |
MainLine visibility Timeline options |
new
style.mainLine.visible Timeline option
to show/hide the 'MainLine' (the actual timeline at the bottom of the canvas with date
markers on it!). |
Dragging Highlight visibility Timeline options |
new
style.draggingHighlight.visible Timeline option
to turn on/off the highlight area which shows when the end user drags the timeline. |
.setStartDate() Timeline method |
new Set the
timeline start date dynamically, with options to control where the date ends up on the
screen (defaults to left edge of the timeline canvas). |
.setZoom() Timeline method |
new Set the timeline zoom level dynamically, with options to control the 'zoom centre' (defaults to centre of the timeline canvas). |
Date unit size Timeline options |
new New zoom.unitSize section that gives you advanced control over the way the date marker units change as you zoom in and out of the timeline. |
Article prototype accessible via global Histropedia object | new You can
now easily extend the functionality of all Article objects with your
own custom properties and methods. These will be accessible from any Article that you
get using one of the available Timeline
methods. e.g. Histropedia.Article.prototype.myMethod = function() { console.log (this.data.title + "-" + this.data.from.year) } Note: You can extend the functionality of all timelines in the same way using Histropedia.Timeline.prototype |
Bug fixed | Details |
---|---|
Event Card title text not centred vertically with multi line titles |
This is set to vertical centring only at the moment, but new options are planned for the next version which allow greater control over positioning of the title within the Event Card header. |
Double tap not working properly on some touch devices | This is now working across all touch devices we've tested it on. Please do get in touch if you find any device/browser combinations that still don't work! |
Active article firing single click on timeline load | There is still an active article on startup (the last article to load), but the article click event no longer fires. |
Feature | Details |
---|---|
.setOption() Timeline method |
new Set Timeline options after initialising you're timeline. Options can be defined using an object, or as a 'path string' using dot notation (as with the other two new setting methods below). |
.setOption() Article method |
new Set Article options after initialising you're timeline. |
.setStyle() Article method |
new Set individual Article styles after initialising you're timeline (use the new setOption Timeline method for changing default styles for all articles) |
activeStyle inherits from normal style Article style options |
changed When using the Article style options, the activeStyle is now defined as an override to the normal style. This means that you no longer need to add a duplicate style setting to both style and activeStyle for things that don't change when active. Any previous activeStyles you have defined will still work, but will have some uneccessary options set that will now be inherited from the normal style. |
Period line stacking Timeline options |
new New article.periodLine.stacking section in the Timeline options that lets you control how the 'period lines' on the timeline are stacked when their durations overlap. The default setting is to sort them by the from date, but you can choose from a range of other built in options (e.g. rank or duration). You can also define you're own custom sorting function if desired. |
Selection of Article sorter functions |
new You can
now access a range of built in functions used for sorting the main articles array of any
timeline (e.g. sort by from date, duration, rank etc).
These can be used with the new periodLine stacking options described above, but are also
very useful when creating custom functions. You can access the new functions via the main Histropedia object - e.g. myTimeline.articles.sort( Histropedia.ARTICLE_RANK_SORTER ) |
.goToDateAnim() Timeline method |
changed You can now pass an object as an optional second parameter, with settings for the pan animation. The current options available are duration (animation duration in milliseconds), offsetX (control where the given date ends up on the screen), and complete (function to be called when animation is complete). |