CSS/XMLTimeline

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:

<HTML>
<HEAD>

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

</HEAD>
<BODY bgcolor="#FFFFFF">


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


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

<script>
   new Timeline("timeline", "xml/timeline.xml");
</script>

</BODY>
</HTML>

 

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-image:url("../images/background.jpg");
   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.

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank