Posts Tagged ‘Timeline’

Redesign of Beauty of Code

Wednesday, June 24th, 2009

In the last weeks I completely changed the design of this site. It became much lighter and I removed some plugins which I didn’t want to use anymore. In particular, I removed the simile timeline on the left.

In the previous design, I used the WP Simile Timeline plugin to show the timeline of the blog entries. This was a vertical timeline located in the left sidebar. The problem was that vertical timelines are pretty complicated to design and the simile timeline doesn’t really support a vertical layout. Therefore I chose to change to a horizontal blog timeline as part of the redesign. At the same time I realized that the timeline doesn’t fit to the overall design.

Hence I wrote my own timeline implementation using jQuery and embedded it in the new layout. Each small vertical tick in the header corresponds to a blog entry. If you hover over it, the link to the blog entry is shown.

Currently there are only few features:

  1. RSS feed: the timeline implementation reads the RSS feed of the site an creates the div elements for the timeline.
  2. Custom creation of events:  create a div and call a simple javascript method to add an event.
  3. Design completely using CSS: it is very difficult to change the theme of the simile timeline. The timeline above can be adjusted using very simple CSS.

But of course, it still can (and needs) to be enhanced.

Elastic vertical Simile Timeline

Monday, June 2nd, 2008

Today there was a post on the Simile mailing list on elastic timelines. In his post Joao Severino refers to a change in the timeline code by Liming Xu which is described in more detail on his blog.

The general idea is to identify overlapping events and then redefine the height of the timeline accordingly. Though I don’t think it’s very useful as it leads to very high timelines, I wonder to what extent this idea could be used to resolve a big issue with the vertical timeline which I use for the blog archive on this blog. If there are two events very close to each other in a vertical timeline, they will automatically overlap.

Potentially this could be resolved by combining hot zones (which currently need to be defined explicitly) with his idea of automatically adjusting the height of the timeline. The Timeline code would check whether two events overlap and add a hot zone for the area of the events.

Two problems would remain:

  1. Events which occur at the same time or so close that the hot zone would cover a very short time (minutes or so).
    This could be handled by a kind of summary event that basically says: here are two (or more events) at the same time, click for details. 
  2. Duration events.

I don’t know yet how to get this resolved in detail, but I’ll try it sometime.