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 any of those. It might modify the proper functioning 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)


Compatibility


LANGUAGE CLASS: Partially.


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