flaTimeline.js

What is it?

A simple jQuery plugin to create a responsive, animated and customizable timeline with a flat style.
FlaTimeline.js is very easy to set-up and really cool to use: smooth animations, responsive design to fit on every device, clean UI.

Features

• Clean and semantic markup
• Responsive design
• Opening and closing animations
• High customization
• Options and callbacks

How it work?

• STEP 1: first of all include jQuery in your project, than add flaTimeline.js and flaTimeline.css to make the timeline works; <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="assets/js/jquery.flatimeline.js"></script> <link type="text/css" rel="stylesheet" href="assets/css/jquery.flatimeline.css" />
• STEP 2: Now, create a super-simple semantic HTML list; <ul class="flaTimeline"> <li class="event"> <div class="date">(The date of your event)</div> <div class="content"> <div class="title">(The title of your event)</div> <div class="text">(The content of your event)</div> </div> </li> <li class="event"> <div class="date">(The date of your event)</div> <div class="content"> <div class="title">(The title of your event)</div> <div class="text">(The content of your event)</div> </div> </li> </ul>
• STEP 3: "Let her go!" [cit. Passenger] <script type="text/javascript"> $(document).ready(function(){ $('ul.flaTimeline').flaTimeline(); }); </script>
• OPTIONS

  Name	Type	Default	Description
  toggle	boolean	true	Set if a single event can be open or not.
  toggleSpeed	numeric	300	Set the speed of the animation that open the event to show its description.
  toggleEasing	easing	swing	Set the easing of the animation that open the event to show its description.
  eventColor	color	#999	Set the color of the events box. A darker color is auto-sets for their bottom.
  gridColor	color	#DDD	Set the color of the timeline's grid.
  borderRadius	pixel	0px	Set the border radius of the events box.
  onStart	function	function(){}	Set a function that start at the begin of every opening/closing event.
  onComplete	function	function(){}	Set a function that start at the end of every opening/closing event.
  onOpeningStart	function	function(){}	Set a function that start when the opening event is started.
  onOpeningComplete	function	function(){}	Set a function that start when the opening event is completed.
  onClosingStart	function	function(){}	Set a function that start when the closing event is started.
  onClosingComplete	function	function(){}	Set a function that start when the closing event is completed.

DANIELE PETRAROLO

web developer