I have been on the hunt for timeline software that would for tracking my fictional characters. My partner-in-crime devised a beautiful timeline in Photoshop, but it was a real chore to keep updated. On Sunday night, I hit upon looking up a HTML and CSS version and came across this version on the dev.Opera website. I modified the code to come up with a version that closely mimics the work of my friend.
I worked feverishly for a few hours on my timeline but eventually became overwhelmed with the difficulty of maintaining this version as well. The problems:
Some issues I would like to bounce off others:
To create the five year time spans (indicted by the thicker border), there are five divs. I have to continuously copy and paste this five div structure to keep going sideways (I will have over a thousand cells when I am done!). When I add a character into the timeline, I have to go into each “year” div and then create the character’s div. If another character was also born in that year, I have to add them inside the same year div.
charactera
Then in the CSS, I have to create a simple margin-top rule to tell the new div/bar how far down to move. The problem becomes apparent when I think of every time a new character is added, every character below them will need to have their margin-top rule adjusted. This is clearly an issue!
The second problem is that those “types” on the side (e.g. Fire) will also need to be pushed further down the page with every new addition. So for instance, if there is a new character added in Fire, Water will need to be pushed down the page.
An ideal thing I would like to ultimately do would be to have a drop down selection box which would then only show characters of that type (or clicking on the text of a “type” would cause those characters to appear). Then someday I’d like to be able to simply type in character names and have only those listed appear. But those are bigger dreams waiting for me to learn advanced coding!
If you enjoyed this article, please consider sharing it!
