View Full Version : Drawing a line in a complex DIV object (Simile Timelines)

05-22-2012, 10:37 PM
I am working on a project that takes a websites data (text) parses out the dates and creates a scrollable timeline out of the website, including pictures.

Right now we have a beta version that creates timelines out of any and all wikipedia articles.

We have a beta version at www.wikitimelines.net.

An explanation of how this technology works is at:


It isn't finished yet, we are still adding functionality and debugging. This thing has a 8000 line database backend, so the work is progressing nicely.

We lack javascript expertise. We are willing to either pay somebody to help us finish this or bring somebody on board for a piece of the action.


Our current need is as follows:

We need a line drawn vertically across the center of the timeline. Since you can have multiple timelines displayed and they are synchronized to scroll together (center date), all timelines center vertical lines will line up for date comparisons across the multiple timelines.

We tried to do it with CSS, but that didn't work as it was not accurate enough between multiple timelines. Therefore the following wont work:

.sync {
background-attachment: scroll;
background-clip: border-box;
background-color: red;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
height: 100%;
margin-left: 49%;
opacity: 0.2;
position: absolute;
width: 3px;
z-index: 5000;

The Javascript to turn off and on the center line would look something like this:

TimeLineName1.DrawCenterLine({width:"4",opacity:"40",color:"red"}) // Width in pixels


The property to retrieve the center date, off of any one timeline, is as follows:


In order to do this, we understand that the base javascript will have to be altered (or maybe not?). If it does, we know what this means, specifically, we will have to serve the javascript ourselves. We can live with this. Extra points if we can do this without modifying the javascript base.

A clue:

Notice at:


In the lower left hand corner. There is a little copyright graphic, with a tool-tip. This dosent move with the timeline. It is thought that this may be a good line of attack for hacking this out.

This can be found at (when properly installed on a server):


I appreciate that you read this message.

J*eff R*oehl
jro*ehl2 (at) yahoo (dot) com
(8*1*8) 9*1*2-7*5*3*0
(remove the asterisk's)