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

 

The bar reppresents the span of time covered by the timeline, and can be clicked to jump to different parts of the timeline. The bar is highlighted in red in this timeline:

 

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

 

 

Tiled Bar

If a tiled background image is applied to the timelines's bar (see CSS below), the tiled bar does not always appear synced with a scrolling bar. To test this:

 

#bar_past {
	background-image: url('../images/timeline_bar.png');
	background-size: auto 100%;
	background-repeat: repeat-x;
}

 

If the tiled image does not get scaled when rendered, then set the settings' bar_tile_width value to the width of the tile image, reload the web page, and perform the above test again. This should sync the tiles with the scrolling bar.

If the tiled image gets scaled when rendered, then set the bar_tile_width value to 2, reload the web page, and perform the above test again. If the tiles do not move or occasionally jump, increase the bar_tile_width value to 3, reload the web page, and perform the above test again. Keep increasing the bar_tile_width value gradually until the tiles sync perfectly with the scrolling bar.

 

Examples
/* timeline bar =================================== */

#bar_container {
	display: block;
	top: 2.5cm;    /* the vertical position of the entire bar */
	height: 1.5cm; /* the height of the entire bar */
	z-index: 13;
}

#bar_past {
	visibility: visible;
	height: 100%; /* the same height as #bar_container */
	background-image: url('../images/timeline_bar.png');
	background-size: auto 100%;
	background-repeat: repeat-x;
			
	-moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_future {
	visibility: visible;
	height: 100%; /* the same height as #bar_container */
	background-image: url('../images/timeline_bar.png');
	background-size: auto 100%;
	background-repeat: repeat-x;
	opacity: .75;
	
	-moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_cap_left {
	visibility: visible;
	width: 1.15cm;
	height: 100%; /* the same height as #bar_container */
	background: rgba(104, 114, 197, 1);
	border: solid rgba(0, 0, 0, .25) .07cm;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-top-left-radius: .5cm;
	border-bottom-left-radius: .5cm;
	
	-moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_cap_right {
	visibility: visible;
	width: 1.15cm;
	height: 100%; /* the same height as #bar_container */
	background: rgba(104, 114, 197, 1);
	border: solid rgba(0, 0, 0, .25) .07cm;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-top-right-radius: .5cm;
	border-bottom-right-radius: .5cm;
	
	-moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
	box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .5);
}

#bar_present {
	visibility: visible;
	width: 2cm;
	height: 2.26cm;
	
	background-image: url('../images/push_pin.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	
	-ms-transform: translate(24%, -13%);           /* align the image with the bar's present location */
	-webkit-transform: translate(24%, -13%);
	transform: translate(24%, -13%);
}



 

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

 

blank

blank

Copyright © 2015-2020, Maani.us.

blank