https://advancedtimeline.herokuapp.com/landingPage.html
https://advancedtimeline.herokuapp.com/documentation.html
This library requires the external library jQuery to function. You can install it using the instructions on their webpage (https://jquery.com/download/) or you can include the script in your html file using the code below.
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Download the library's css and javascript files from the documentation page on the library's website.
Include the css file in your html file using the code below
<link rel='stylesheet' type='text/css' href='AdvancedTimeline.css'></link>
Include the javascript file in your html file using the code below
<script defer type="text/javascript" src="AdvancedTimeline.js"></script>
Create a javascript file and include the script in your html file using the code below.
<script defer type="text/javascript" src="example.js"></script>
Call the constructor function to create an AdvancedTimeline object.
const timeline = new AdvancedTimeline();
Use the makeTimeline method to create a timeline. Provide the id of the DOM element in which you would like to create the timeline as the first parameter. Specify the value of the starting and ending points.
Optionally, you can specify a description of these points. This function returns the id of the starting and ending points.
const [startPoint, endPoint] = timeline.makeTimeline('#example1', false, 'white', "Start", "End", 'Starting Point', 'EndPoint')
Use the makeNewPoint method to create a point. Provide the value of the point as the first parameter. Optionally, you can specify a description of the point. This function returns the point's id.
const middlePoint = timeline.makeNewPoint("Middle", 'Middle Point')
Use the makeSubPoint method to create a subpoint for a point. Provide the id of the point in which you would like to create the sub point as the first parameter. Specify the value of the subpoint and optionally a description for it. This function returns the subpoint's id.
const subPoint = timeline.makeSubPoint(startPoint, "Point 1", "Point 1 Information")
Use the addTextElementToSubPoint method to add text to the subPoint's information card. Provide the id of the subpoint in which you would like to add the text as the first parameter. Specify the value of the text. You can also add images, audio, and video elements.
timeline.addTextElementToSubPoint(subPoint, 'This is the first subpoint')