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

 

A date event is a timeline entry with a single date, reflecting a brief occurrence in time. Date events are highlighted in red in this timeline:

 

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

 

 

Date Event Position

Date events can be positioned under, above, or on top of a standard timeline bar by specifying the settings' date_fill_direction XML attribute and the date's fill_direction XML attribute.

In addition to specifying the above XML attributes, specify both the top and height properties of the #date_events_container and #connectors_container. The easiest way to do this is by mimicking the top and height attributes of the bar (see below). When a date event is below a standard bar, it is rendered below the bottom edge of #date_events_container. When a date event is above a standard bar, it is rendered above the top edge of #date_events_container. In these cases, the container specifies the gap between date events rendered below the bar and those rendered above it. When the fill of a date event is set to none, it is rendered vertically in the middle of #date_events_container.

 

<timeline>

	<!-- The general fill direction of date events is up. -->
	<settings date_fill_direction="up" />

	<!-- These events and their connectors are rendered up. -->
	<date title="London Trip" ... />
	<date title="Paris Trip" ... />

	<!-- This event overrides the general fill direction. It is rendered down. -->
	<date title="Madrid Trip" fill_direction="down" ... />

</timeline>

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

#connectors_container {
	top: 100px;	 /* The top of #connectors_container. */
	height: 50px;  /* The height of #connectors_container. */
	...
}

#date_events_container {
	top: 100px;	/* The top of #date_events_container. */
	height: 50px;  /* The height of #date_events_container. */
	...
}

 

Date Event Layout

The maximum width of date events can be specified with the width property of .event_background, while the actual rendered width is affected by neighboring timeline elements. By default, the height property of .event_background is set to auto to enable stretching.

The title, date, notes, and image of date events are children divs positioned in that order relative to their parent .event_background. This order can be edited with the settings' date_render_order XML attribute to create a new layout:

 

/* Parent div. */
.event_background { /* Stretching .event_background height. */
	width: 5.6cm;
	height: auto;
	...
}


/* Children divs. */
.event_title { /* A child with relative positioning. */
	position: relative;
	...
}

.event_image { /* A child with absolute positioning. */
	position: relative;
	...
}

 

Another approach is to give fixed values to both the width and height properties of .event_background, and to use a different position value for the children divs:

 

/* Parent div. */
.event_background { /* Fixed .event_background size. */
	width: 5.6cm;
	height: 5.6cm;
	...
}


/* Children divs. */
.event_title { /* A child with absolute positioning relative to .event_background. */
	position: absolute;
	left: 2cm;
	top: 0;
	...
}

.event_image { /* A child with absolute positioning relative to .event_background. */
	position: absolute;
	left: 0;
	top: 0;
	width: 2cm;
	height: 2cm;
	...
}

 

Individual Look

By default, event CSS properties apply to all the events collectively. For example, editing the color value of .event_title changes the title color of all date 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 (<date title="中华人民共和国" id="china" />).

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

 

/* Parent div. */
.event_background { /* The general background declaration for all date events. */
	background: rgba(255, 255, 255, 0.7);
	...
}

#universe_SolarSystem { /* A unique background declaration for universe_SolarSystem. */
	background: rgba(255, 0, 0, 0.7);
	...
}


/* Children divs. */
.event_title { /* The general title declaration for all date events. */
	color: #000000;
	...
}

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


.event_notes { /* The general notes declaration for all date events. */
	font-size: 12px;
	...
}

#universe_SolarSystem .event_notes { /* A unique notes declaration for universe_SolarSystem. */
	font-size: 14px;
	...
}

 

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:

 

<timeline>

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

</timeline>

<script>
	
	function customizeEvent ( event_title ){
		
		switch ( event_title ){
		
			case "Solar System":
			var event_div = document.getElementById( "universe_SolarSystem" );
			if ( event_div ){
				event_div.style.background="#ff0000";
				var my_div = document.createElement( "div" );
				event_div.appendChild( my_div );
				...
			}
			break;
			
			...
		}
	}
	
</script>

 

 

Formatted Text

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

 

 

Examples
/* date events =================================== */

#date_events_container {
	visibility: visible;
	top: 2.5cm;    /* used by setting's date_fill_direction and date's fill_direction */
	height: 1.5cm; /* used by setting's date_fill_direction and date's fill_direction */
	z-index: 15;
}

.event_background {
	display: block;
	/* left: specified programmatically */
	/* top: specified programmatically */
	width: 5.6cm; /* the maximum width of date events */
	height: auto; /* set to auto to enable stretching */
	background: rgba(255, 255, 255, 0.7);
	-moz-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);
	-webkit-box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);
	box-shadow: 0 .13cm .2cm rgba(0, 0, 0, .75);

	padding: .26cm .2cm .2cm .2cm;
	-moz-box-sizing: border-box; /* padding without affecting width and height */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.event_title {
	display: block;
	font-size: .4cm;
	color: #444444;
	font-weight: bold;
	text-shadow: 0 .02cm .07cm rgba(0, 0, 0, .25);
	margin: 0 0 .05cm 0;
}

.event_date {
	display: block;
	font-size: .3cm;
	color: #888888;
	font-weight: bold;
	margin: 0 0 .25cm 0;
}

.event_notes {
	display: block;
	font-size: .4cm;
	color: #444444;
	margin: 0 0 .3cm 0;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.event_image {
	display: block;
}



 

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