background preloader


Facebook Twitter

jQuery Timelinr. 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.

jQuery Timelinr

Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.54 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum.

Icon designed by Sebastián Cortés Changelog: 0.9.54: Bugfix: large timelines now gets centered.0.9.53: Bugfix: arrows hidden when jumping from first and last dates resolved.0.9.52: Problem with arrows nav and 2 or less issues now fixed.0.9.51: As requested, now prev/next buttons are hidden if the issue is in the first/last position. Configuración: Timeline JS - Beautifully crafted timelines that are easy, and intuitive to use. Timeline - CHAP Links Library. 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. A few bullets: Timeglider works well on iPads, but is not yet optimized for Android devices. - Homepage. Timeline Tutorial: Introduction. Build Your Own Interactive Timeline Using the extraordinary Exhibit and Timeline scripts written by MIT's SIMILE project and the flexible power of Google Docs spreadsheets, it's now possible to build custom, interactive, and searchable timelines for use in your research and your teaching.

Timeline Tutorial: Introduction

Watch the screencast below to see exactly how such a timeline works. But why would you want to build a timeline? Well, just imagine that you are teaching a survey course of Victorian literature. You could assign your students different years in this time period and ask them to identify four important events that happened in their particular year and to post them to a timeline. Now that you have an idea why, I’m going to walk you through the steps of building your own timeline. This tutorial has three sections. Jquery - Creating vertical timelines with Javascript/jQquery. Timeline Portfolio. Martin Angelov Timeline is a jQuery plugin specialized in showing a chronological series of events.

Timeline Portfolio

You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests. The HTML Timeline comes with a light colored theme by default. First, let’s look at the basic layout of the page: index.html <! In the head section, we have the plugin’s stylesheet – timeline.css, and styles.css, which will hold our customizations.

When we call the plugin, it will search for a div on your page with the ID of timeline. As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. Timeline Portfolio with jQuery Writing the CSS by looking at the markup alone would be a tough undertaking, given that our rules must have precedence over the ones used in timeline.css. The jQuery The CSS The previous and next arrows: Done!