background preloader

Librairies JavaScript

Facebook Twitter

15+ jQuery Timeline Plugin with Example. Dynamic Timeline : jQuery Responsive Time Line Plugin A JQuery plugin that allows you to create horizontal and vertical time lines to show off a portfolio or chronological and visually pleasing events!

15+ jQuery Timeline Plugin with Example

Timesheet.js : JavaScript library to create HTML time sheets. Timeline documentation. Overview The Timeline is an interactive visualization chart to visualize data in time.

timeline documentation

The data items can take place on a single date, or have a start and end date (a range). You can freely move and zoom in the timeline by dragging and scrolling in the Timeline. Items can be created, edited, and deleted in the timeline. The time scale on the axis is adjusted automatically, and supports scales ranging from milliseconds to years. Timeline uses regular HTML DOM to render the timeline and items put on the timeline. Contents Example The following code shows how to create a Timeline and provide it with data. <! <script type="text/javascript"> // DOM element where the Timeline will be attached var container = document.getElementById('visualization'); // Configuration for the Timeline var options = {}; Timeline. jQuery Plugin/Widget. Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript.

jQuery Plugin/Widget

This widget is the core of our our timeline authoring and publishing app, and can be integrated into any HTML application environment. Timelines 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. Timeglider works well on iOS and Android touch devices; Windows Surface devices are still problematic. Click here for a "kitchen sink" demo, demonstrating a number of public methods. Laboratorio de ideas web.

Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines.

Laboratorio de ideas web

Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.54 Configuration: TimelineSetter. TimelineSetter creates beautiful timelines.

TimelineSetter

It is a command-line utility that takes a specially-structured CSV file as input and outputs standards-compliant HTML/CSS/JavaScript. It supports any span of time from minutes to years, and supports multiple parallel event series in a single timeline. It can handle custom descriptions and even arbitrary HTML in each event “card.” Vertical Timeline. Today's resource is an easy to customize, responsive timeline.

Vertical Timeline

We used some CSS3 tricks and a bit of jQuery to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal. Browser support ie Chrome Firefox Safari Opera 9+ We all are quite familiar with vertical timelines: all instant messaging applications use them. A current trend in web design is to use a similar structure, but to show a process rather than a sequence of events. That is why timeline-like structures are often used for the “How it works” page. The inspiration for this nugget came from the Zurb University page. Icons: Nucleo Library Creating the structure We wrapped the entire timeline into a <section> element. Adding style We used a ::before selector in absolute position to create the vertical line. 2 bounce-in animations, both for the image/icon and the text content, have been created and are visible only for desktop users.

Events handling. Timemap - Javascript library to help use a SIMILE timeline with online maps including Google, OpenLayers, and Bing. Timemap.js is a Javascript library to help use online maps, including Google, OpenLayers, and Bing, with a SIMILE timeline.

timemap - Javascript library to help use a SIMILE timeline with online maps including Google, OpenLayers, and Bing.

The library allows you to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously. By default, only items in the visible range of the timeline are displayed on the map. Version 2.0.1 Now Up! Version 2.0.1 is primarily a maintenance release, fixing a number of small bugs and cleaning up a few things that weren't quite right in v.2.0. Anyone using v.2.0 should probably upgrade to v.2.0.1, as it is more stable and includes very few changes other than bug fixes and new unit tests.