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 - ruler

 

The ruler is a strip marked at regular intervals for measuring timeline distances. It is highlighted in red in this timeline:

 

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

 

 

Examples
/* ruler =================================== */

#ruler_container {
	display: block;
	top: 0; /* the vertical position of the entire ruler */
	height: 2.5cm; /* used to anchor the ruler's elements to the bottom (flipping the ruler vertically) */
	z-index: 11;
}


.ruler_long_tick {
	visibility: visible;
	width: .05cm;
	height: .6cm;
	background: rgba(0, 0, 0, 1);
}

.ruler_long_label {
	visibility: visible;
	top: .65cm;
	font-size: .4cm;
	color: rgba(0, 0, 0, 1);
	font-weight: bold;
	white-space: nowrap;
}


.ruler_medium_tick {
	visibility: visible;
	width: .02cm;
	height: .4cm;
	background: rgba(0, 0, 0, 1);
}

.ruler_medium_label {
	visibility: visible;
	top: .45cm;
	font-size: .35cm;
	color: rgba(255, 255, 255, 1);
	font-weight: normal;
	white-space: nowrap;
}


.ruler_short_tick {
	visibility: visible;
	width: .02cm;
	height: .2cm;
	background: rgba(0, 0, 0, .4);
}

.ruler_short_label {
	visibility: visible;
	top: .25cm;
	font-size: .3cm;
	color: rgba(255, 255, 255, 1);
	font-weight: normal;
	white-space: nowrap;
}



 

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

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank