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

 

 

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.

 

 

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

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank