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 - Multiple Timelines

 

To display multiple timelines on the same web page:

 

1. On the web page:

<HTML>
<HEAD>
   <script type="text/javascript" src="includes/timeline.js"></script>
   
   <link rel="stylesheet" href="css/timeline_1.css" type="text/css">
   <link rel="stylesheet" href="css/timeline_2.css" type="text/css">
   <link rel="stylesheet" href="css/all_timelines.css" type="text/css">
</HEAD>
<BODY bgcolor="#FFFFFF">


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


   <div id='timeline_1'></div>
   <div id='timeline_2'></div>

   <script>
      new Timeline("timeline_1", "xml/timeline_1.xml");
      new Timeline("timeline_2", "xml/timeline_2.xml");
   </script>

</BODY>
</HTML>

 

2. To edit the appearance of each timeline independently, link the declarations of each stylesheet to a different timeline by adding the timeline's div #id before each stylesheet selector:

timeline_1.css

#timeline_1 {...}

#timeline_1 #bar_past {...}

#timeline_1 #bar_future {...}

...

#timeline_1 .event_background {...}

#timeline_1 .event_title {...}

...

timeline_2.css

#timeline_2 {...}

#timeline_2 #bar_past {...}

#timeline_2 #bar_future {...}

...

#timeline_2 .event_background {...}

#timeline_2 .event_title {...}

...

 

3. To collectively edit elements with shared appearance across all timelines (such as interface buttons), remove their declarations from timeline_1.css and timeline_2.css and place them (without selector modifications) in all_timelines.css:

all_timelines.css

#button_prev {...}

#button_next {...}

...

 

blank

blank

Copyright © 2015-2017, Maani.us.

blank