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.)

XML - category

 

<category title="string" 
          color="string" 
          />
             

Description

The category XML element creates a category to optionally mark and identify events that belong to the same group.

Date events are displayed with connectors of the same color as their category. Period events are displayed with the color of their category, unless they have their own color attribute.

 

 

 

Examples
<timeline>

   <!-- Art events. -->
   <date title="Statue of David" year="1504" month="9" day="8" category="Art" />
   <date title="Mona Lisa" year="1519" category="Art" />

   <!-- Technology events. -->
   <period title="Stone Age" start_year="2400000" start_suffix="BP" end_year="3300" end_suffix="BC" category="Technology" //>
   <date title="Phonograph" year="1877" month="11" day="21" category="Technology" />
   <date title="Light Bulb" year="1879" month='12' day='31' category="Technology" />

   <!-- Categories. -->
   <category title="Art" color="rgba(255, 0, 0, 1)" />
   <category title="Technology" color="rgba(0, 255, 0, 1)" />

</timeline>

 

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