often in forums it is easier to reflect entities evolving in time or events with the help of a timeline. I developed for this purpose the following timeline bbcode.

I did not have time to create all the “standard” patch or whatsoever, so I wil provide a description what to do in order to use it:

1. add the following scripts to the overall_header.html file of your template (styles/subsilver2/template for example)

  <script src=”http://simile.mit.edu/timeline/api/timeline-api.js” type=”text/javascript”></script>    <script type=”text/javascript”>

function showTimeline(element, events) {
          if( $(element).attr(”id”) != “” )
             return;
          var elementid = “d” + Math.floor(Math.random() * 100000000) ;
          $(element).attr(”id”, elementid );
            var eventSource = new Timeline.DefaultEventSource();
            var lastDate ;
            //the input event source si in form of |date; event name; comment|date; event name; comment|

            jQuery.each(events.split(”|”), function() {
                    eventelements = this.split(”;”);
                    lastDate = new Date(eventelements[0]);
                    var evt = new Timeline.DefaultEventSource.Event(
                       lastDate,
                       lastDate,
                       lastDate,
                       lastDate,
                       true,
                       eventelements[1] + “:” + eventelements[2],
                       eventelements[3] + “<br/><a href=’http://cucu.cuc/?&q=” + eventelements[1] + “‘ target=’_blank’>” + “search for “+ eventelements[1] + ” with eugle </a>” );
                    eventSource.add(evt);

                  });
          var bandInfos = [
             Timeline.createBandInfo(
                   {
                   date: lastDate,
                  width: "70%",
                  intervalUnit: Timeline.DateTime.MONTH,
                  intervalPixels:30 ,
                  eventSource: eventSource
               
               }),
             Timeline.createBandInfo(
                   {
                   date: lastDate,
               width:          "30%",
               intervalUnit:   Timeline.DateTime.YEAR,
               intervalPixels: 50,
                  eventSource: eventSource
            })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;

            var tl = Timeline.create(element, bandInfos);

}

2. create a new bbcode under the administration panel/Posting

3. inside BBCode usage paste:

[timeline]{TEXT}[/timeline]

4. inside HTML replacement paste:

<div  style=”border: 2px solid; width: 1000px; height: 200px” onclick=”showTimeline(this,’{TEXT}’)”><span style=”font-weight: bold; font-size:20pt; margin:5pt;
“> Click inside the box to show the timeline </span></div><div>drag the timeline to move in time…</div>

5. usage:

[timeline]September 1, 1944; Benelux; Decision to set up;Exact month, day…
|September 1, 1947;Marshall plan; ??; Exact day, details…
|September 1, 1948;Benelux ; created;Exact day…
|september 1, 1948;OEEC; established; Exact day, details.
[/timeline]