/timeslider

TimeSlider Plugin for jQuery

Primary LanguageJavaScriptMIT LicenseMIT

TimeSlider Plugin for jQuery

This fork is just a fix to handle event on_move_ruler_callback. We need to be able to change not only hours_per_ruler, but also start_timestamp. So moving one ruler, will move all rulers at same time. [Fork Demo] (https://output.jsbin.com/wuyuyo)

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

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