Blogfreakz - Web Design and Web Development resources » Timeline

Timeglider – Open Source Timeline Component Built in Javascript

Mufti Ali — Sat, 26 Mar 2011 00:03:00 +0000

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.

The javascript version has a few goals:

Functionality on iPads and other touch-enabled devices.
Easy integration into HTML/JS-based applications and interfaces.
Complex layout possibilities with customized blocks of HTML for
any given event.

Requirements: jQuery Framework
Demo: http://timeglider.com/jquery
License: MIT license

Incoming search terms for the article:

Google Timeline like With PHP, CSS & jQuery

Mufti Ali — Sat, 09 Jan 2010 12:13:00 +0000

Tutorialzine teach us how to make Advanced Event Timeline with the help of PHP, MySQL, CSS & jQuery, that will display a pretty time line with clickable events. This tutorial, released inspired by Google’s 10th Birthday Timeline, available at http://www.google.com/tenthbirthday/.

Te main idea is that we have two divs – timelineLimiter and timelineScroll positioned inside it. The former takes the width of the screen, and the latter is expanded to fit all the event sections that are inserted inside it. This way only a part of the larger inner div is visible and the rest can be scrolled to the left and right by a jQuery slider.

The final result is an awesome timeline that you can modify to showcase the important events that mark your days. It is easily modifiable and you are free to use it in your or your clients’ projects.

Demo: http://demo.tutorialzine.com/2010/01/advanced-event-timeline…
Visit original tutorial: http://tutorialzine.com/2010/01/advanced-event-timeline…

Incoming search terms for the article:

Timeline, Web Widget for Visualizing Temporal Data

Mufti Ali — Thu, 22 Oct 2009 16:21:19 +0000

Timeline is web widget for visualizing Temporal Data. If You using plurk, maybe you already familiar with somethink like this.

With this widget, you can make beautiful interactive timelines. You can try dragging it horizontally or using your mouse-wheel. Click on each event for more details.

Demo: http://www.simile-widgets.org/timeline/
License: BSD license.