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

 

<date title="string"
      notes="string"
      image="string"
      video="string"
      audio="string"
      background_color="string"
      preload_delay="int"
 
      year="int" 
      month="int" 
      day="int"
      hour="int"
      minute="int"
      era="string"

      lightbox="boolean"                  <-- event actions --/>
      lightbox_color="string"
      credit="string"
      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" 
        
      fill_direction="string"
      category="string"      
      />
             

Description

The date XML element creates a date event in the timeline. 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:

 

 

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 displaying a lightbox, 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 an image and link_to_webpage attributes, the lightbox displays the image 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 and notes 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 second example below.

 

 

Examples
<timeline>

   <!-- Date event with an actual date. -->
   <date title="John's Birthday" year="2012" month="6" day="19" image="john.jpg" notes="It's a boy!" />

   <!-- Date event with a date relative to present. -->   
   <date title="Big Bang" year="13798000000" era="BP" link_to_webpage="http://www.google.com/search?q=big+bang" />

   <!-- Date event always anchored to present. -->   
   <date title="Present" year="0" era="AP" />

</timeline>

<timeline>

   <!-- HTML text formatting tags, before using escape characters. -->
   <!-- <date title="Dawn of <i>Homo sapience</i>" />
  
   <!-- HTML text formatting tags, after using escape characters. -->
  <date 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