MelonHTML5 Timeline

CodeCanyon MelonHTML5 Timeline 3884755
Script \ JavaScript \ Media
UPDATE \ Timeline \ Option \ Facebook \ Twitter \ Ability \ Column \ Mobile

JavaScript - MelonHTML5 Timeline 3884755 by MelonHTML5 @ CodeCanyon

Script \ JavaScript \ Media

Timeline enables you to build visually-rich interactive timelines on your website. It lets you display blog posts, embedded 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 with database or any other systems.

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: Wordpress Version is also available.


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


Each timeline could be set to Dual Column, Left Column, Right Column or Center Column modes.


Timeline also comes with the “must have” responsive design which lets it to be displayed on mobile devices like a champion.

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 easily.


A full CSS3 (jQuery Fallback for IEs) lightbox is included which can be applied to images used in elements. 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 or any other systems.


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


You can also use timeline’s built-in API to append new data to an existing timeline instance via AJAX.

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.


You can simply feed timeline data with a single RSS Feed URL. Any of the 4 timeline types can be used with RSS Feed.

FULL API FUNCTIONS (for advanced used)

Plenty of API options are also given (e.g. turn animation on or off, turn year separator on or off … 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.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

Last Update: 6 December 14; High Resolution: Yes; Compatible Browsers: IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, JavaScript JSON, HTML, CSS, Layered PNG; Software Version: jQuery.

MelonHTML5 - Royal Preloader WP; MelonHTML5 - Timeline WP; MelonHTML5 - Metro UI; MelonHTML5 - Grid Slider; MelonHTML5 - Royal Tab; MelonHTML5 - Sliding Menu; MelonHTML5 - Royal Preloader.

Keywords: MelonHTML5, blog, event management, facebook, gallery, json, lightbox, rss, slider, social, timeline, twitter, video.

Create CodeCanyon MelonHTML5 Timeline 3884755 style with After Effect, Cinema 4D, 3DS Max, Apple Motion or PhotoShop. CodeCanyon MelonHTML5 Timeline 3884755 from creative professional designers. Full details of CodeCanyon MelonHTML5 Timeline 3884755 for digital design and education. CodeCanyon MelonHTML5 Timeline 3884755 desigen style information or anything related.


Add Comments:
Enter Code: *