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.)

HTML - Custom Elements

 

To add text, buttons, and other custom elements to the timeline, nest new divs inside the timeline's main div:

 

<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='timeline'>
   <div id='timeline_title' style="position:absolute; z-index:200; pointer-events:none;">My Life</div>
</div>

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

</BODY>
</HTML>

 

Javascript Nesting

To nest custom elements inside events, see Individual Look.

To nest custom elements inside timeline parts such as the bar, get each timeline part by its id and then append children to it:

 

/* append a div to the bar to make them scroll together */
var bar_div=document.getElementById("bar_past");
if( bar_div ){
	var my_div = document.createElement( "div" );
	bar_div.appendChild( my_div );
}

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank