CSS/XML Timeline is a simple, yet powerful HTML5 tool for generating interactive timelines from CSS and dynamic XML data. Create XML events then pass them to this tool to generate a timeline. The XML source can be prepared manually, or generated dynamically using any scripting language (PHP, ASP, CFML, Perl, etc.)

CSS - main div


The timeline's main div is a division (section) of the web page that displays the timeline. It is the entire area highlighted in red here:


The timeline's main div is specified in the HTML document. It can have any unique id without spaces:


   <script type="text/javascript" src="includes/timeline.js"></script>
   <link rel="stylesheet" href="css/timeline.css" type="text/css">

<BODY bgcolor="#FFFFFF">

<P>This is my web page.</p>

<div id='my_timeline'></div>

   new Timeline("timeline", "xml/timeline.xml");



The timeline's main div has a corresponding CSS declaration in the timeline's stylesheet. In timeline.css that comes with the download package, it is the first CSS declaration. It must have an identical #div selector:

#my_timeline {...}

#bar_past {...}

#bar_future {...}



Edit the CSS here to specify the timeline's position in the web page, background, default font, etc.

#my_timeline {
   position: relative;
   left: 0%;
   top: 0%;
   width: 95%;
   height: 500px;

   font-family: "Trebuchet MS", "Helvetica","Sans-Serif";
   background-repeat: repeat;
   border: .02cm solid white;

   -moz-box-shadow: 0 5px 10px .02cm rgba(0, 0, 0, .25); 
   -webkit-box-shadow: 0 5px 10px .02cm rgba(0, 0, 0, .25); 
   box-shadow: 0 5px 10px .02cm rgba(0, 0, 0, .25);



Vertical Timeline

To create a vertical timeline, start by rotating the main timeline div, and then rotate the other timeline elements if necessary:

#my_timeline {
	-ms-transform: rotate(90deg);
	-ms-transform-origin:  0% 0%;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 0% 0%;
	transform: rotate(90deg);
	transform-origin: 0% 0%;

.event_title {
	-ms-transform: rotate(-90deg);
	-ms-transform-origin:  60% 100%;
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: 60% 100%;
	transform: rotate(-90deg);
	transform-origin: 60% 100%;

See this gallery example for details.




Copyright © 2015-2017, Maani.us.