VerticalTimeline

The vertical timeline is a dynamic way to create a timeline on the vertical way.

How to Initialize the Timeline ?

The initialization of the viewer is an one step process, just call the function Init of the class with his three arguments (see above for more details)

Class Details

Functions:

Name

Arguments

Return

Description

Init

String: NewID - HMTL ID defining the position in the DOM of the viewer
String: Name - Define the name of the timeline all timeline component will be defined by this name (this is to avoid mix if you use different timeline so be sure to use different name for each timeline).
JSON : data - JSON data which define how the viewer will be build.

VOID

This function Initialized every part of the timeline: HMTL, CSS, Data, etc...

It will generate in the defined ID as NewID and all HTML IDs used for this timeline will start by the name defined in arguments

Also to define the data and the design you must fill the data arguments, that work thanks to a JSON files (for more details about the JSON check the section below).

Private Details

All private details are usable but its recommended to not use anythings of those. It might modify the good working of the class

Variables (Members):

Name	Type	Default Value	Description
basedId	String	null	HTML Id of the viewer parent.
id	String	null	Global HMTL Id of the viewer (# + name).
name	String	null	Name of the viewer used by the class for all HTML IDs

Functions:

Name	Arguments	Return	Description
GetDateDivId	Integer: id - Number of the of the Div	String - HTML ID of the Date div	Function used to get the HTML ID of the a date div (used to short the code).
GetDateTextId	Integer: id - Number of the of the Div	String - HTML ID of the text div	Function used to get the HTML ID of the a text div (used to short the code).
GetLineId	Integer: date - date of the line you want the ID Integer: line - Numerical ID of the line you want	String - HTML ID of the line	Function used to get the HTML ID of the a line (used to short the code).
isOK	JS Object: obj - Reference to the obj	Boolean	Check if the selected OBJ is valid (Defined // Non-Null)

Data Structure

Main Structure Details

Note:

black -> Needed

Blue -> Optional

"History": { //Data class holder

"Global": { //Define the main settings of the timeline

"CSSGroup": { //Define the CSS of the time

"CSS": { //CSS Class

"Children": [ //To add extra CSS for some children (see below how it work)

]

"bgURL": null, //To change the line of the Timeline (it act as a Background), specify null for using the default line

"arrowURL": null, //To change the arrow of the Timeline (it act as a Background), specify null for using the default arrow

"Info": { //Define some extra setting

"SpaceTitle": "50px", //like the margin for the titles (dates)

"SpaceLine": "25px" //Define some extra setting

}

"Dates": [ //Groups of the dates and events. Each date is group of events.

{

"Title": { //Group to define the title of the date (Which basically the date for the user)

"Text": "2018", //Text of the date

"CSSGroup": { //CSS groups for the date

"CSS": {

"Children": [

]

}

"EventsList": [ //List of event in chronological order that belong to this date

{

"Text": " - Test line", //Text of the event

"CSSGroup": { //CSS groups for the event

"CSS": {

"Children": [

]

}

]

}

]

Note:

CSS Children: Children is a list of class composed by two data (Name are important):

String: ID - HTML ID of the target (it start by adding the ID of the target object then the children)
Class: CSS - CSS details to add

Created with the Personal Edition of HelpNDoc: Easily create Help documents