Creating a timeline grid, for example, in Javascript?

Question

I am trying to create a Timeline grid to add and manage tasks at a specific time (in seconds) on a timeline. Is there a way to create such a Javascript / jquery timeline?

What I'm trying to do is 0.5 seconds. intervals on the timeline. Each element has a start and end range on the timeline. Elements can be dragged to change the start and end range, as well as to resize. Here is an example mochup that I built:

Any suggestions or solutions would be highly appreciated.

Thanks Praney

Answer 1

Look at the timeline for link plugins.

http://almende.imtqy.com/chap-links-library/timeline.html

In particular, these demonstrations

http://almende.imtqy.com/chap-links-library/js/timeline/examples/example13_grouping.html http://almende.imtqy.com/chap-links-library/js/timeline/examples/example15_mobile.html

Iv previously used this plugin to create a control system, add editing, drag and drop between groups.