Super Cool Time-glider with jquery

Home Calendar & Date & Time pickerSuper Cool Time-glider with jquery

Super Cool Time-glider with jquery

13 years ago Views

15106

2559

timeglider

Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning, and much more.

The timeline can be zoomed by dragging the vertical slider at right: up for zooming in (less time shown) and down for zooming out (more time shown). The mousewheel also works as a zoom controller. Any white area on the "stage" of the timeline can be dragged left and right, as can the blue "ruler" which marks out different units of time. Clicking on an event brings up a small modal window with a description and links if any are provided in the data.

Step 1jQuery UI and Timeglider CSS Files

At the top of your document, in the <head> of the document, you'll need to include at least two CSS files, one which goes hand-in-hand with jQuery UI (for the visual styling of the widget), the other for the application-dependent styling and positioning for Timeglider's elements. The jQuery UI CSS file provided with our download is called Aristo, developed originally by 280 North.

<link rel="stylesheet" href="css-folder/aristo/jquery-ui-1.8.5.custom.css"
    type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css-folder/Timeglider.css" type="text/css"
    media="screen" title="no title" charset="utf-8">

Step 2jQuery JS

Timeglider is a jQuery plugin (actually a "widget", but we'll keep things simple). So you need a version of jQuery of 1.4.4 or higher.

<script src='/your_js_folder/jquery.js' type='text/javascript'>

Alternately, you could take advantage of Google's worldwide network of servers (called a CDN) and use this reference to jQuery instead:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' 
     type='text/javascript'>

Step 3jQuery UI JS

You'll also need a recent download of jQuery UI, a suite of jQuery-based interactive tools and effects. jQuery UI can be customized to include specific components. At a minimum, your jQuery UI needs to include these:

all of the core modules
interactions: draggable & droppable
widgets: button, dialogue, slider & datepicker
no effects are necessary

You can download the exact jQuery UI library necessary OR go to the jQuery UI site and create a build that meets these requirements as well as others you may need.

Step 4 JS: Timeglider

Timeglider JS is a minimized (compressed) Javascript file which also incorporates a few other jQuery libraries and plugins including Underscore.js, Backbone.js, Raphael.js, Brandon Aaron's mousewheel plugin, Ben Alman's Tiny Pub/Sub and Debug, and more.

Place the minimized file like this, after the jQuery and jQuery UI tags:

<script src='your_js_folder/timeglider.min.js' type='text/javascript'>

The plugin code

If you've worked with jQuery plugins before, installing timeglider will be a straightforward. Here's what the code from the demo looks like:

<!-- html: -->
   <div id='placement'></div>
    
<!-- js: -->
   $(document).ready(function () { 
      var tg1 = $("#placement").timeline({
         "data_source":"json_tests/js_history.json",
         "min_zoom":15,
         "max_zoom":60, 
     });
   });

Options

Options are the elements of the widget plugin Javascript highlighted above. They are name-value pair attributes stated together (in an object) as the sole argument of the plugin. The right-hand value portion of each option could be a number, a string (i.e. text), or possibly another data type like another object or an array.

The article source:http://timeglider.com/jquery/?p=install

Tag: Time glider