Download HistropediaJS


Free for non-commercial use

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.

  • histropedia-1.1.1.js
  • histropedia-1.1.1.min.js
  • jquery-3.1.0.min.js
  • jquery.mousewheel-3.1.13.min.js

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.

Documentation


Licence Agreement and Download

By downloading and using the software, you acknowledge your understanding and acceptance of the HistropediaJS Non-Commercial Licence Agreement. Please read this carefully before you proceed.


What's new?



Newsletter announcement

Fixes:

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 postNewsletter announcement

Features:

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:
  • Histropedia.PRECISION_MILLENNIUM
  • Histropedia.PRECISION_MILLION_YEARS
  • Histropedia.PRECISION_BILLION_YEARS
'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:
  • bceText: Text string appended to date labels for indicating BCE dates.
  • thousandsSeparator: Character used for separating the digits of large numbers in to groups.
  • yearPrefixes: Settings for the new prefixes feature, which abbreviates date labels showing a large number of years. The defaults are set to match the most widely used convention when dealing with large timescales: ka = 1000 years, Ma = 1 million years and Ga = 1 billion years.
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

Fixes:

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.


Newsletter announcement

Features:

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).

Fixes:

  • Various minor bug fixes