Building a Timeline Grid like layout in Javascript?

javascript jquery css timeline
praneybehl picture praneybehl · Aug 21, 2013 · Viewed 7.5k times · Source

I am trying to create a Timeline Grid for adding and managing tasks at specific times(seconds) on a timeline. Is there a way to be able to create such a timeline Javascript/jquery?

What I am trying to do it have a 0.5 sec. intervals on the timeline. Every item has a start and an end range on the timeline. The items can be draggable to change starting and ending range and also resizeable. Here is a sample mochup I have built:

enter image description here

Any suggestions or solutions will be highly appreciated.

Thanks, Praney

Answer

James Nicholson picture James Nicholson · Aug 21, 2013

Have a look at the chap links plugin timeline.

http://almende.github.io/chap-links-library/timeline.html

In Particular these demos

http://almende.github.io/chap-links-library/js/timeline/examples/example13_grouping.html http://almende.github.io/chap-links-library/js/timeline/examples/example15_mobile.html

Iv used this plugin before to make a management system, adding editing, drag between groups.

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More