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

<period title="string" 
       
        start_year="int" 
        start_month="int" 
        start_day="int"
        start_hour="int" 
        start_minute="int"
        start_era="string"
        end_year="int" 
        end_month="int" 
        end_day="int"
        end_hour="int" 
        end_minute="int"
        end_era="string"
                
        lightbox="boolean"                  <-- event actions --/>
        show_webpage="string" 
        link_to_webpage="string" 
        target="string"
        javascript_on_append="string" 
        javascript_on_click="string" 
        javascript_on_center="string" 
        javascript_on_decenter="string" 
        center_to_execute="boolean"
        
        category="string"
        color="string"
        level="int"
        />
             

Description

The period XML element creates a period event in the timeline. A period event is a timeline entry with two dates that delineate a span of time. Period events are highlighted in red in this timeline:

Unlike date events, period events do not display notes and images. Also, navigating the timeline with the prev and next buttons does not stop on period events. Combine date events with period events to add information and enable proper navigation (see bottom examples).

• title: The title of the period event. This is a required attribute and must be a unique string (events with similar titles are not valid). Example: title="College Years". See Formatted text below.
  
  
  
• start_year: The actual year of the start of the event, or the number of year count from the present (see start_era below). If omitted, the start_year defaults to 0. Examples: start_era="2016", start_era="13000000000".
  
  
• start_month: The month of the start of the event. Valid values are 1 to 12, which correspond to January to December. If omitted, the start_month defaults to 1 (January). Example: start_month="3".
  
  
• start_day: The day of the start of the event. Valid values are 1 to 31, which correspond to the day of the month. If omitted, the start_day defaults to 1. Example: start_day="28".
  
  
• start_hour: The hour of the start of the event. Valid values are 0 to 23, which correspond to the hour of the day. If omitted, the start_hour defaults to 12 (midday is the default to avoid midnight rounding errors that display the previous day). Example: start_hour="13".
  
  
• start_minute: The minute of the start of the event. Valid values are 0 to 59, which correspond to the minute of the hour. If omitted, the start_minute defaults to 0. Example: start_minute="36".
  
  
• start_era: The era the above start date. Valid values are: CE (Common Era), BCE (before the Common Era), BP (before present), and AP (after present). Both upper and lower case are valid. If omitted, the start_era defaults to CE (Common Era). Examples: start_era="CE", start_era="bce".
  
  
  
• end_year: The actual year of the end of the event, or the number of year count from the present (see end_era below). If omitted, the end_year defaults to 0. Examples: end_year="2016", end_year="13000000000".
  
  
• end_month: The month of the end of the event. Valid values are 1 to 12, which correspond to January to December. If omitted, the end_month defaults to 1 (January). Example: end_month="3".
  
  
• end_day: The day of the end of the event. Valid values are 1 to 31, which correspond to the day of the month. If omitted, the end_day defaults to 1. Example: end_day="28".
  
  
• end_hour: The hour of the end of the event. Valid values are 0 to 23, which correspond to the hour of the day. If omitted, the end_hour defaults to 12 (midday is the default to avoid midnight rounding errors that display the previous day). Example: end_hour="13".
  
  
• end_minute: The minute of the end of the event. Valid values are 0 to 59, which correspond to the minute of the hour. If omitted, the end_minute defaults to 0. Example: end_minute="36".
  
  
• end_era: The era the above end date. Valid values are: CE (Common Era), BCE (before the Common Era), BP (before present), and AP (after present). Both upper and lower case are acceptable. If omitted, the end_era defaults to CE (Common Era). Examples: end_era="CE", end_era="bce".
  
  
  
  
• lightbox: The lightbox is displayed by clicking an event to view its media content (click the event to center it first, then click it again to display the lightbox). If lightbox is omitted or set to true, and the the event has a lightbox-related attribute (e.g. show_webpage), then the lightbox gets displayed. If lightbox is set to false, the lightbox does not get displayed, even if the event has a lightbox-related attribute. Example: lightbox="false".
  
  
• show_webpage: The URL of a web page to show within the lightbox. The lightbox is displayed by clicking an event to show additional event information (click the event to center it first, then click it again to display the lightbox). This can be used to assign a web page to each event, showing additional information formated independently from the timeline itself, including movies, music, etc. Example: show_webpage="http://www.mydomain.com/birthday_movies.html".
  
  
• link_to_webpage: The URL of an external web page to link this event to. This URL is opened in a new browser window when the event is clicked (click the event to center it first, then click it again to open the link). This differes from the above show_webpage attribute by displaying the web page in a different browser window. If omitted, no link is opened. Example: link_to_webpage="http://www.google.com/search?q=solar+system".
  
  
• target: Where to open the link specified by link_to_webpage. Valid values are _blank, _self, _parent, _top, and framename. If omitted, target defaults to _blank. Example: target="_self".
  
  
• javascript_on_append: A javascript code to execute when the event is appended to the timeline. This can be used to customize events individually (see Individual Look). Example: javascript_on_append="alert('Hello World!')".
  
  
• javascript_on_click: A javascript code to execute when the event is clicked (click the event to center it first, then click it again to execute the code). This can be used to build additional timeline features and to sync multiple timelines on the same web page. Example: javascript_on_click="alert('Hello World!')".
  
  
• javascript_on_center: A javascript code to execute when the event is centered on the screen, even if the event itself was not clicked. This can be used to build additional timeline features and to sync multiple timelines on the same web page. Example: javascript_on_center="alert('Hello World!')".
  
  
• javascript_on_decenter: A javascript code to execute when the event is decentered (when it moves away from the center of the screen). This can be used to build additional timeline features. Example: javascript_on_decenter="alert('Hello World!')".
  
  
• center_to_execute: By default, clicking an event centers it, a feature that can be used to navigate quickly to nearby events. Once centered, clicking the event again executes its click actions (displaying a lightbox, opening a URL link, etc.). However, if center_to_execute is set to false, the event's click actions are executed before centering the event. Example: center_to_execute="false".
  
  
  
  
• category: The category this event belongs to. Each event can be optionally assigned one of the categories created with the category xml tag. Period events are displayed with the color of their category, unless they have their own color attribute (see color below). If omitted, the category defaults to "All" (black). Examples: category="World History", category="Diary".
  
  
• color: The color of the period event in rgba format. RGBA stands for red, green, blue, and alpha. An rgba color contains four numbers, the first three are from 0 to 255 and correspond to the red, green, and blue values. The fourth number is from 0.0 to 1.0 and corresponds to the alpha (transparency) value. If omitted, the color defaults to the category color. Example: color="rgba(255, 128, 0, .5)".
  
  
• level: Period events are automatically arranged in tiers that maximize space. To override this automatic arrangement, add the level attribute to some or all period events. A level value of 1 is the first tier, 2 is the second tier, etc. Example: level="1".
  
  

Event Actions

Event actions are available only in the registered version of CSS/XML Timeline.

By default, clicking an event centers it, a feature that can be used to navigate quickly to nearby events. Once centered, clicking the event again executes its click actions, including opening a URL link and executing a Javascript code. All the actions specified in the event's XML attributes get executed. For example, if the event has a javascript_on_click and link_to_webpage attributes, the Javascript code gets executed and the browser opens the URL link, both at the same time.

If center_to_execute is set to false, the event's click actions are executed before centering the event. This is useful in some case as in the left timeline on this gallery page.

Formatted Text

In addition to the CSS text properties, event titles can contain HTML text formatting tags such as <b>, <i>, and <span>. To prevent these HTML tags from conflicting with XML tags, use escape characters as described here. See the third example below.

<timeline>

   <!-- Period event with actual dates. -->
   <period title="Honeymoon" start_year="2008" start_month="4" start_day="1" end_year="2008" end_month="4" end_day="18" />

   <!-- Period event with dates relative to present. -->   
   <period title="Jurassic Period" start_year="199600000" start_era="BP" end_year="145500000" end_era="BP" />

   <!-- Period event always anchored to present. -->   
   <period title="My Life" start_year="1993" end_year="0" end_era="AP" color="rgba(255, 128, 0, .5)" />

</timeline>

<timeline>

   <!-- Combined period and date events for complete information and proper navigation. -->
   
   <period title="World War II" start_year="1939" start_month="9" start_day="1" end_year="1945" end_month="9" end_day="2" />

   <date title="German Invasion of Poland" year="1939" month="9" day="1" />

   <date title="Surrender of Japan" year="1945" month="9" day="2" />


</timeline>

<timeline>

   <!-- HTML text formatting tags, before using escape characters. -->
   <!-- <period title="Dawn of <i>Homo sapience</i>" />
  
   <!-- HTML text formatting tags, after using escape characters. -->
   <period title="Dawn of &lt;i&gt;Homo sapience&lt;/i&gt;" />

</timeline>

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