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

 

Connectors are the lines that attach each date event to the timeline's bar. Connectors are highlighted in red in this timeline:

 

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

 

 

Connector Position

Connectors can be positioned both under and above 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 connector is below a standard bar, it is rendered below the bottom edge of #connectors_container. When a connector is above a standard bar, it is rendered above the top edge of #connectors_container. Although connector are the children of #connectors_container, they are not rendered inside it, but outside it. In this case, the container specifies the gap between connector rendered below the bar and those rendered above it.

 

<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. Connectors are rendered above this point. */
	height: 50px; /* The height of #connectors_container. Connectors are rendered below this point. */
}

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

 

 

Examples
/* connectors =================================== */

#connectors_container {
	display: block; /* show or hide all connectors */
	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: 14;    /* used to place connectors either behind or in front of period events */
}

.event_connector {
	height: .65cm; /* the initial height of connectors */
	opacity: 1;
	
	border-width: .04cm; /* the thickness of connectors */
	border-style: solid; /* the style of connectors (solid, dotted, dashed, ...) */
	/* border-color: the color of connectors is specified by the event's category */ 
}



 

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