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

HTML - Javascript API

 

The Javascript API is available only in registered copies of CSS/XML Timeline.

 

To send javascript calls to a timeline, assign a variable to the timeline object and then invoke its API functions.

<HTML>
<HEAD>

   <script type="text/javascript" src="includes/timeline.js"></script>
   <link rel="stylesheet" href="css/timeline.css" type="text/css">

</HEAD>
<BODY bgcolor="#FFFFFF">

<P>This is my web page.</p>

<div id='timeline'></div>

<script>

   <!-- Construct a Timeline object. -->
   var timeline_object = new Timeline ( "timeline", "xml/timeline.xml" );
   
   <!-- Wait for the timeline to get fully constructed. -->
   setTimeout( function () {
   
       <!-- Verify that the timeline finished loading. -->
      if( timeline_object.isReady() ){
      
         <!-- Invoke a timeline's API function. -->
         timeline_object.scrollToEvent ( "World War II" );
         
      }
      
   }, 1000 );
        
</script>

</BODY>
</HTML>

 

 

Ready?

To check if the timeline is ready to process API calls, call the isReady function.

if ( timeline_object.isReady () ){
   ...   
}

 

Next Event

To scroll the timeline to the next event, call the nextEvent function.

timeline_object.nextEvent ();

 

Previous Event

To scroll the timeline to the previous event, call the previousEvent function.

timeline_object.previousEvent ();

 

Scroll to Event

To scroll the timeline to an event, call the scrollToEvent function, passing it the event's title. This could be either a date or period event.

This function can be used to create bookmarks, rewind button, etc.

timeline_object.scrollToEvent ( "World War II" );

 

Jump to Event

To jump to an event, call the jumpToEvent function, passing it the event's title. This could be either a date or period event.

This function is similar to scrollToEvent, but it displays the event immediately (without scrolling). It can be used to create bookmarks, rewind button, etc.

timeline_object.jumpToEvent ( "World War II" );

 

Scroll to Date

To scroll to a date, call the scrollToDate function, passing it the year, month, day, hour, minute, and era. Valid month values are 1 to 12. Valid day values are 1 to 31. Valid hour values are 0 to 23. Valid minute values are 0 to 59. Valid era values are CE (Common Era) and BCE (before the Common Era).

timeline_object.scrollToDate ( 2010, 12, 31, 18, 30, "CE" );

 

Jump to Date

To jump to a date, call the jumpToDate function, passing it the year, month, day, hour, minute, and era. Valid month values are 1 to 12. Valid day values are 1 to 31. Valid hour values are 0 to 23. Valid minute values are 0 to 59. Valid era values are CE (Common Era) and BCE (before the Common Era).

This function is similar to scrollToDate, but it displays the date immediately (without scrolling). It can be used to create bookmarks, rewind button, etc.

timeline_object.jumpToDate ( 2010, 12, 31, 18, 30, "CE" );

 

Start Play

To move automatically throughout the timeline (play mode), call the startPlay function and pass it the play direction and the interval between events in seconds. The play direction is either "forward" or "backward". The minimum interval is 2 seconds.

timeline_object.startPlay ( "forward", 2 );

 

Stop Play

To stop the play mode, call the stopPlay function.

timeline_object.stopPlay ();

 

Set Category Visibility

To hide or show the events that belong to a category, call the setCategoryVisibility function and pass it the category title and a visibility boolean.

timeline_object.setCategoryVisibility ( "Technology", false );

 

Set Settings Attribue

To edit a settings attribute, call the setSettings function and pass it the name of the attribute and its new value. Editable settings attributes are:

timeline_object.setSettings ( "date_fill_direction", "alternate" );
timeline_object.setSettings ( "period_fill_direction", "up" );
timeline_object.setSettings ( "today_in_history", false );
timeline_object.setSettings ( "fps", 40 );

 

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank