Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Media

MelonHTML5 - Timeline

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

MelonHTML5 - Timeline - CodeCanyon Item for Sale


Ad: Bluehost hosting


Timeline enables you to build visually-rich interactive timelines on your website. It lets you display blog posts, videos, photo gallery, slider…etc with plenty of customizable options, which should suit all your needs. Timeline also accepts JSON as data source which makes it extremely easy to integrate it with your own database in any programming languages.

Please give it quick rating if you like this. If you have any suggestions/feature request or you find a bug, you are more than welcome to contact us and we’ll address them ASAP.

Live Demo

NOTE: jQuery Version is also available.


Timeline event can be displayed as a Blog Post, Slider, Gallery, Video and so on. Each display type offers unique options such as Lightbox, Slideshow, Preloading …etc.

Timeline can be displayed in Dual Column, Left Column, Right Column or Center Column.

Timeline also comes with full responsive design suiting any of your website designs.

THEMES: super easy to create your own theme file
Multiple themes are included by default. The HTML and CSS structure are designed for you to create your own themes very easily.

A full CSS3 (jQuery Fallback for IEs) lightbox is included. You also get the option to turn it on or off.

Yes, just one DIV, no complex HTML is required.

Timeline lets you use JSON as data source, so you can easily integrate it with your own database in any programming languages.

Displaying a large number of data in one timeline instance with a load more button which loads more data automatically on clicking.

Wanna implement your own AJAX data load for Timeline? No problem, you can use the built-in API to add new data to an existing Timeline instance.

SOCIAL INTEGRATION (see Twitter Timeline Demo and Facebook Timeline Demo)
You can also use its API to easily integrate Twitter, Facebook or any other social network into the Timeline. Examples are included in the files.

FULL API FUNCTIONS (for advanced used)
Plenty of API options are also given (e.g. turn animation/separator on or off, set date format … etc), which allows you to configure the timeline to suit your own needs.

CSS3 animations + jQuery Fallback for IE
All animations are written in CSS3 for better performance, and old IEs will get jQuery animations.

SUPPORT ALL MAJOR BROWSER (IE 7+, Chrome, Firefox, Safari, Opera)
Timeline has been thoroughly tested in all major browsers and mobile devices, performance is also optimized for each browser. So we wanna say it’s 99.99% bug free.

Elements are ordered by time automatically. You can also set the order to be DESC or ASC.

Date can be displayed in any format by setting one single option

A full example of mobile mode is included in the files, so if you are to build a mobile website, this is what you need.


v2.08 @ 12 Dec 2015
 UPDATE: Added ability to combine Twitter and Facebook together 
v2.07 @ 18 Mar 2015
 UPDATE: Updated Facebook API to v2.0 
v2.06 @ 12 Feb 2015
 UPDATE: Updated Twitter API to use the current protocol type instead of http only 
v2.05 @ 05 Dec 2014
 BUGFIX: Fixed Load More button when multiple timelines are used on one page 
v2.04 @ 04 Nov 2014
 BUGFIX: Fixed lightbox to not open multiple images when clicking on 2 images too fast 
v2.03 @ 15 Oct 2014
 UPDATE: Added support for Time 
v2.02 @ 07 Oct 2014
 UPDATE: Allow the "content" option to be used in other event types UPDATE: Added 2 new themes BUGFIX: Fixed a bug in "loadmore" option 
v2.01 @ 26 July 2014
 UPDATE: Updated lightbox design UPDATE: Do not play slider automatically by default UPDATE: Added a new dark theme 
v2.00 @ 07 July 2014
 UPDATE: Revamped HTML and CSS UPDATE: NEW 100% Responsive Mode UPDATE: NEW "Load More" option (no custom JavaScript code is needed anymore) UPDATE: Simplified Options UPDATE: Allow to show the first time separator UPDATE: Huge performance improvement 
v1.08 @ 25 February 2014
 UPDATE: Facebook: use large images when available (photo posts) 
v1.07 @ 01 February 2014
 UPDATE: Updated moment.js to the latest version UPDATE: Added ability to separate data by year, month or month year UPDATE: Simplified Facebook and Twitter integration UPDATE: Added ability to set default width via option so that the size of JSON data can be reduced 
v1.06 @ 08 August 2013
 UPDATE: NEW API appendData(): add additional data to an existing timeline UPDATE: NEW option "max": set maximum number to timeline elements to be displayed 
v1.05 @ 18 July 2013
 UPDATE: Added ability to display posts of a Facebook Page by providing a page ID UPDATE: Updated Facebook API to work with its latest changes (access token) UPDATE: Updated Twitter API service URL to the new one 
v1.04 @ 02 July 2013
 UPDATE: Added a new "dateFormat" option 
v1.03 @ 28 June 2013
 UPDATE: Updated Twitter API to v1.1 
v1.02 @ 18 Feb 2013
 UPDATE: Added ability to set element order: DESC or ASC 
v1.01 @ 27 Jan 2013
 UPDATE: Added ability to delete timeline elements UPDATE: Added a new center column mode UPDATE: Added responsive and mobile mode to examples 
v1.00 @ 25 Jan 2013
 Initial release 

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


26 January 13

Last Update:
12 December 15

High Resolution:

Compatible Browsers:
IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, JavaScript JSON, HTML, CSS, Layered PNG

Software Version:


eCommerce, eCommerce, All Items, blog, event management, facebook, gallery, json, lightbox, MelonHTML5, rss, slider, social, timeline, twitter, video