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

 

<settings start_year="int"                             <-- bar settings --/>
          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"
          launch_timeline_length="string"
          launch_timeline_position="string"
          launch_event="string"
          event_bounds="boolean"
          remember_last_position="boolean"
          bar_tile_width="int" 

          date_fill_direction="string"                 <-- events settings --/>
          period_fill_direction="string"
          date_render_order="string"
          scale_effect="boolean"
          period_spacing="string"
          period_gradient="boolean"
          periods_push_dates="boolean"
          today_in_history="boolean"
          
          auto_prev_next="boolean"                     <-- navigation settings --/>
          auto_zoom="boolean"
          vertical_scroll="boolean"
          interactive_bar="boolean"
          interactive_period="boolean"
          interactive_background="boolean"
          fps="int"
          min_startup_delay="int"
          
          />
             

Description

The settings XML element defines the timeline's general preferences and default values.

 

 

 

Examples
<timeline>

   <settings start_year="2000" end_year="2100" remember_last_position="true" />

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

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