Timeline Portfolio. Timeline is a jQuery plugin specialized in showing a chronological series of events.
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. It is perfectly usable and in most cases would be exactly what you need. 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. <div class="container main" id="timeline"><div class="feature slider" style="overflow-y: hidden;"><div class="slider-container-mask slider-container slider-item-container"><!
As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. Masonry. Donavon Frankenreiter - Free. Almende.github.io/chap-links-library/js/timeline/examples/ Timeline documentation. Contents Overview The Timeline is an interactive visualization chart to visualize events in time.
The events 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. Events can be created, edited, and deleted in the timeline. When the timeline is defined as editable (and groupChangeable and timeChangeable are set accordingly), events can be moved to another time by dragging them. The Timeline is developed as a Google Visualization Chart in javascript. The Timeline is designed to display up to 1000 events smoothly on any modern browser. Example. Facebook Timeline Design using JQuery and CSS. I know what my readers are expecting from 9lessons blog, after long time I'm going to discuss about Jquery usage.
Facebook timeline design makes big revolution in social networking world and it gives new feel to the user profile pages. In this post I want to explain how simple I had implemented this design with Jquery and CSS. Try this demo with modern browsers like Chrome, Firefox and Safari (IE is dead). Download Script Live Demo Step 1 - HTML Layout First create a DIV element with attribute ID value container.
<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div> Normal CSS Floats. Step 2 - Avoid Spaces I used jQuery Masonry plugin for adjusting the empty gaps. Balancemedia/Timeline. The Evolution of the Web. 7 Beautiful Web Based Timeline Using Javascript and CSS. A timeline is a way of displaying a list of events in chronological order, sometimes described as a project artifact .
It is typically a graphic design showing a long bar labeled with dates alongside itself and (usually) events labeled on points where they would have happened. Here is the collection of 7 cool web based timelines which can blew away your mind. 1. Simile Widgets With this widget, you can make beautiful interactive timelines like the one below. 2. Timeglider JS is a zooming, panning data-driven timeline widget written in Javascript— great for history projects, project planning, and more. 3. 4. TikiToki is a web app that makes it dead easy for people to create interactive multimedia timelines in their browsers. - Top 10 Sites for Creating Timelines by David Kapuler. 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.
Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 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: Draw Zoomable Time Line With Scroll Bars On Html5 Canvas. Github-timeline/