User:Christian Sirolli/Timeline

This shows a timeline that I've been working on. It needs some JavaScript to work, though.

Essentially, it is a template with the following parameters: font - default: Default. Can be any font, as long as it is either natively supported by the browser or it is included in the site styles. pos - default: top. Can be either top or bottom. zoom - default: 10. Can be any number from 0 to 10. height - default: 800. Value is in pixels. Can be any number. width - default: 800. Value is in pixels. Can be any number. navHeight - default: 60. Value is in percent. Can be any number. Defines the height of the timeline navigation. navMobileHeight - default: 60. Value is in percent. Can be any number. Defines the height of the timeline navigation on mobile devices. slidePadding - default: 50. Value is in pixels. Can be any number. Defines the left and right padding of the slides. hash - default: event-jesus-christ. Defines the timeline event that is shown by default.

To get the event hash, go to the timeline and select the event you want. Then copy the text after the hashtag in the URL. For example, if you select the event "Jesus Christ", the url will be. Thus the hash is event-jesus-christ.



The below is the JavaScript needed: (function {    'use strict';    var tt = document.getElementsByClassName('timelineTemplate');    if (tt !== null) {        [].slice.call(tt).forEach(function (t) { var i = document.createElement('iframe'); i.src = 'https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1ulQOdFOc3EHA4oHKAMu72XRbezXE7imScH6mAUA0mR4&font='+t.getAttribute('data-font')+'&lang=en&timenav_position='+t.getAttribute('data-pos')+'&initial_zoom='+Number(t.getAttribute('data-zoom'))+'&hash_bookmark=true&timenav_height_percentage='+Number(t.getAttribute('data-nav-height'))+'&timenav_mobile_height_percentage='+Number(t.getAttribute('data-nav-mobile-height'))+'&slide_padding_lr='+Number(t.getAttribute('data-slide-padding'))+'&embed=true#'+t.getAttribute('data-hash'); i.height = t.getAttribute('data-height'); i.width = t.getAttribute('data-width'); console.log(i); t.appendChild(i); });   } });