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 - period events


A period event is a timeline entry with two dates that delineate a span of time. Period events are highlighted in red in this timeline:


To set the appearance of the timeline's period events, edit the stylesheet's CSS under the following selectors:



Period Event Position

Period events can be positioned either under or above a standard timeline bar by specifying the settings' period_fill_direction XML attribute. Unlike date events, period events cannot alternate between the up and down fill direction.

In addition to specifying the period_fill_direction XML attribute, specify both the top and height properties of the #period_events_container. The easiest way to do this is by mimicking the top and height attributes of the bar (see below). When a period event is below a standard bar, it is rendered below the bottom edge of #period_events_container. When a period event is above a standard bar, it is rendered above the top edge of #period_events_container. Although period events are the children of #period_events_container, they are not rendered inside it, but outside it. In this case, the container specifies the gap between period events rendered below the bar and those rendered above it.


   <!-- The fill direction of all period events is up. -->
   <settings period_fill_direction="up" />

   <!-- These events are rendered up. -->
   <period title="London Trip" ... />
   <period title="Paris Trip" ... />


#bar_container {
	top: 100px;   /* The top of the timeline's bar. */
	height: 50px; /* The height of the timeline's bar. */

#period_events_container {
	top: 100px;   /* The top of #period_events_container. Period events are rendered above this point. */
	height: 50px;  /* The height of #period_events_container. Period events are rendered below this point. */


Individual Look

By default, event CSS properties apply to all the events collectively. For example, editing the color value of .period_title changes the title color of all period events. However, it is possible to add CSS declarations for individual events.

Each event has the unique id, programmatically constructed from the timeline's div id, followed by the event's title, using only the alphanumeric characters (only Latin letters and numbers. All the other characters get stripped). For example, if the timeline's div id is "universe" and the title of an event is "> Solar System.", then the event's id is "universeSolarSystem". If this formula does not generate a unique id, include your own event id in the date or period XML tags (<period title="中华人民共和国" id="china" />).

The event's id can optionally be used to create new CSS declarations that target just this event:


/* Parent div. */
.period_background { /* The general background declaration for all period events. */
	border-radius: 10px;

#universe_SolarSystem { /* A unique background declaration for universe_SolarSystem. */
	border-radius: 5px;

/* Children divs. */
.period_title { /* The general title declaration for all period events. */
	color: #000000;

#universe_SolarSystem .period_title { /* A unique title declaration for universe_SolarSystem. */
	color: #FFFFFF;


To edit the same event with Javascript, use javascript_on_append XML attribute to invoke a javascript code when the event gets appended to the timeline, and then edit or add children to the event's div:



	<period title="Solar System" javascript_on_append="customizeEvent('Solar System')" ... />


	function customizeEvent ( event_title ){
		switch ( event_title ){
			case "Solar System":
			var event_div = document.getElementById( "universe_SolarSystem" );
			if ( event_div ){
				var my_div = document.createElement( "div" );
				event_div.appendChild( my_div );


Nesting children inside period events might not be always practical, because:

Use div nesting inside period events only if the above issues can be addressed (see this Gallery example).


Formatted Text

Event titles can contain HTML text formatting tags. See Formatted Text on this page.



/* period events =================================== */

#period_events_container {
	display: block;
	top: 2.4cm;    /* used by setting's period_fill_direction */
	height: 1.7cm; /* used by setting's period_fill_direction */
	z-index: 16;

.period_background {
	/* left: specified programmatically */
	/* top: specified programmatically */
	/* width: specified programmatically */
	height: .75cm; /* period event height */
	border-radius: .3cm;
	/* The background color of period events is specified by their categories, or */
	/* by the color XML attribute of each individual period event.  */
	/* background: NA  */	

.period_title {
	position: relative;  /* relative to period_background */
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: .75cm;
	line-height: .75cm;
	font-size: .4cm;
	font-weight: bold;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden; /* must be hidden to enable text-overflow:ellipsis */ 
	white-space: nowrap;
	color: rgba(0, 0, 0, .8);
	text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);


See the Gallery section for additional examples. Click Show Source below each gallery example to view its code.




Copyright © 2015-2021, Maani.us.