TimeSlider Plugin for jQuery

---

English description | Описание на русском

Lightweight and usable plugin for timeline management.

Features

• Any number of time cells at one page.
• Drag and drop

Demo

Demo page.

Dependencies

• jQuery 1.6.1+

Usage

1. Load jQuery library

<script src="/path/to/jquery.min.js"></script>

2. Load TimeSlider plugin's stylesheet and JavaScript

<link href="css/timeslider.css" rel="stylesheet">
<script src="js/timeslider.js"></script>

3. Create an empty DIV element that will be served as the container for the plugin

<div id="ts" class="time-slider"></div>

4. Initialize the plugin and we're ready to go.

$('#ts').TimeSlider();

Settings

Option	Default	Type	Description
start_timestamp	Current local time	Integer	Left border from which starts the ruler. Timestamp in milliseconds since January 1 1970.
current_timestamp	Current local time	Integer	Current time. Timestamp in milliseconds. Red vertical line.
hours_per_ruler	24	Float	Length of the ruler in hours. Min is 1, Max is 48.
graduation_step	20	Integer	Minimum pixels between graduations on the ruler. It can vary from 20 to 39. Calculated independently.
distance_between_gtitle	80	Integer	Minimum pixels between titles of graduations.
update_timestamp_interval	1000	Integer	Interval through which will update the current time. In milliseconds.
update_interval	1000	Integer	Interval through which will updates the graphical elements. In milliseconds.
show_ms	false	Boolean	Whether to show the milliseconds?
init_cells	null	Array|Function	Add time cells on initial. Can be list of time cells or a function with plugin context.
ruler_enable_move	true	Boolean	Enabling on move the ruler from UI.
timecell_enable_move	true	Boolean	Enabling on move time cells from UI.
timecell_enable_resize	true	Boolean	Enabling on resizing time cells from UI.
on_add_timecell_callback	null	Function	Callback. Is called after add time cell. Callback has 3 parameters: id (id of time cell), start (the start point of time cell), stop (the end point of time cell, can be not set if time cell is not finished).
on_toggle_timecell_callback	null	Function
on_remove_timecell_callback	null	Function
on_remove_all_timecells_callback	null	Function
on_dblclick_timecell_callback	null	Function
on_move_timecell_callback	null	Function
on_resize_timecell_callback	null	Function
on_change_timecell_callback	null	Function
on_dblclick_ruler_callback	null	Function
on_move_ruler_callback	null	Function
on_change_ruler_callback	null	Function

Donations

• PayPal: https://www.paypal.me/vishnevskiy
• Yandex.Money: https://money.yandex.ru/to/410011466316463