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

 

The standard timeline's indicator appears above the bar, marking the user's current position on the timeline. The indicator is highlighted in red in this timeline:

 

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

 

 

Examples
/* timeline indicator =================================== */

#indicator_container {
	display: block;
	top: 0; /* the vertical position of the entire indicator */
	height: 2.45cm; /* used to anchor #indicator_text to the bottom, allowing the text to grow upward */
	z-index: 12;
}

#indicator_graphic {
	display: block;
	bottom: 0cm;
	border-left: .25cm solid transparent;			/* CSS trick to draw triangles */
	border-right: .25cm solid transparent;			/* CSS trick to draw triangles */
	border-top: .25cm solid rgba(255, 240, 100, 1);		/* CSS trick to draw triangles */
}

#indicator_text { /* the properties of the entire indicator text */
	display: block;
	bottom: .47cm;
	font-size: .4cm;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .4);
}

#relative_to_present {  /* the text between parentheses after actual dates. e.g. (10 years ago) */
	display: block;
	font-size: .37cm;
	opacity: .7;
}

#relative_to_big_bang { /* the distance of the current date from the the Big Bang */
	display: block;
	font-size: .37cm;
	opacity: .7;
}

#relative_to_cosmic_calendar { /* the current date relative to the Cosmic Calendar */
	display: block;
	font-size: .37cm;
	opacity: .7;
}

#astronomical_numbering { /* the text that appears after 0 CE */
	display: block;
	font-size: .4cm;
	color: #ff9;
	opacity: .9;
}


 

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