Timeline Portfolio

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. However, for our portfolio, a dark design would be a better fit, so we will customize it to our liking.

First, let’s look at the basic layout of the page:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>

        <!-- The default timeline stylesheet -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- Our customizations to the theme -->
        <link rel="stylesheet" href="assets/css/styles.css" />

		<!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script|Antic+Slab" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

		<div id="timeline">
			<!-- Timeline will generate additional markup here -->
		</div>

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="assets/js/timeline-min.js"></script>
		<script src="assets/js/script.js"></script>

    </body>
</html>

In the head section, we have the plugin’s stylesheet – timeline.css, and styles.css, which will hold our customizations. In the footer we have the jQuery library, timeline plugin and script.js which initializes it.

When we call the plugin, it will search for a div on your page with the ID of timeline. Inside it, it will inserts all the markup it needs to present the 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">

			<!-- The divs below are the events of the timeline -->

			<div class="slider-item content">
				<div class="text container">

					<h2 class="start">Johnny B Goode</h2>
					<p><em><span class="c1">Designer</span> &amp; <span class=
					"c2">Developer</span></em></p>

				</div>

				<div class="media media-wrapper media-container">
					<!-- Images or other media go here -->
				</div>
			</div>

			<div class="slider-item content content-container">
				<div class="text container">

					<h2 class="date">March 2009</h2>
					<h3>My first experiment in time-lapse photography</h3>
					<p>Nature at its finest in this video.</p>

				</div>

				<div class="media media-wrapper media-container">
					<!-- Images or other media go here -->
				</div>
			</div>

			<!-- More items go here -->
		</div>

        <!-- Next arrow -->
		<div class="nav-next nav-container">
			<div class="icon"></div>
			<div class="date">March 2010</div>
			<div class="title">Logo Design for a pet shop</div>
		</div>

        <!-- Previous arrow -->
		<div class="nav-previous nav-container">
			<div class="icon"></div>
			<div class="date">July 2009</div>
			<div class="title">Another time-lapse experiment</div>
		</div>
	</div>

	<div class="navigation">

			<!-- The navigation items go here (the tooltips in the bottom)
                one for each of the events -->

			<div class="time">
				<!-- The timeline numbers go here -->
			</div>
		</div>

		<div class="timenav-background">
			<div class="timenav-line" style="left: 633px;"></div>

			<div class="timenav-interval-background top-highlight"></div>
		</div>

		<div class="toolbar" style="top: 27px;">
			<div class="back-home icon" title="Return to Title"></div>
			<div class="zoom-in icon" title="Expand Timeline"></div>
			<div class="zoom-out icon" data-original-title="Contract Timeline"></div>
		</div>
	</div>
</div>

As we will be modifying the CSS of the timeline, the fragment above will give you a better idea of the customizations. Note that we won’t be recreating the plugin’s stylesheet from scratch, we will only be overriding some of the rules in our own css file. This has the benefit of making future updates to the plugin straightforward, not to mention that it will be much easier.

Timeline Portfolio with jQuery

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. Fortunately, there is a much easier way, as you will see in the CSS section of this tutorial.

The jQuery

To initialize the plugin, we need to call the VMM.Timeline() method on document ready:

$(function(){

	var timeline = new VMM.Timeline();
	timeline.init("data.json");

});

The init method takes single argument – the data source. It can either be a json file like above, or a Google spreadsheet (reminiscent of our Spredsheet Powered FAQ Tutorial).

For more information on the supported data sources, see the documentation on the plugin’s site, or browse the data.json file in the zip download for this tutorial.

The CSS

I used Firebug’s HTML Inspector to get the right selectors for the elements that we are about to customize. In the HTML tab, it is easy to see what rules have been applied to each element by timeline.css. To override them, I copied the same selectors to styles.css which is where our modifications will take place. On several occurrences, however, I have used the !important flag to make my work easier.

All the customizations you see below override only a handful of CSS styles. The rest are inherited by the default stylesheet. Let’s begin!

The first thing we will do in styles.css, after styling the page itself, is to change the backgrounds of the timeline:

#timeline{
	background:none;
}

/* The individual events in the slider */
.slider .slider-container-mask .slider-container{
	background:none;
}

/* Setting a custom background image */
#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
    border-top:none;
}
Timeline Navigation with a CSS 3D Effect

Timeline Navigation with a CSS 3D Effect

To create the 3D effect of the timeline navigation, we will need to use additional elements. But the Timeline plugin doesn’t include such in its markup. An easy solution is to use :before / :after pseudo elements. The :after element is the darker top part and it uses a linear gradient to enhance the effect.

#timeline div.navigation:before{
	position:absolute;
	content:'';
	height:40px;
	width:100%;
	left:0;
	top:-40px;
	background: url('../img/timeline_bg.jpg') repeat;
}

#timeline div.navigation:after{
	position:absolute;
	content:'';
	height:10px;
	width:100%;
	left:0;
	top:-40px;
	background:repeat-x;

	background-image: linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -moz-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%);
	background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%);
}

Then we add a dark background to the timeline navigation (the section with the small clickable tooltips that represent the events):

#timeline div.timenav-background{
 	background-color:rgba(0,0,0,0.4) !important;

}

#timeline .navigation .timenav-background .timenav-interval-background{
	background:none;
}

#timeline .top-highlight{
	background-color:transparent !important;
}

Later we style the zoom-in / zoom-out buttons and toolbar:

#timeline .toolbar{
	border:none !important;
	background-color: #202222 !important;
}

#timeline .toolbar div{
	border:none !important;
}

The numeric scale at the bottom comes next:

#timeline .navigation .timenav .time .time-interval-minor .minor{
	margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
	color: #CCCCCC;
}

The previous and next arrows:

.slider .nav-previous .icon {
	background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
	font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
	background: url("timeline.png") no-repeat scroll 72px -221px transparent;
	width: 70px !important;
}

.slider .nav-next:hover .icon{
	position:relative;
	right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
	border: medium none;
}

The loading screen:

#timeline .feedback {
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
	border:none;
}

#timeline .feedback div{
	color: #AAAAAA;
	font-size: 14px !important;
	font-weight: normal;
}

Then we move on to the slides:

#timeline .slider-item h2,
#timeline .slider-item h3{
	font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
	color:#fff;
}

#timeline .slider-item p{
	font-family:'Segoe UI',sans-serif;
}

#timeline .slider-item img,
#timeline .slider-item iframe{
	border:none;
}

Finally, we will customize the appearance of the front page. I am using nth-child(1) to target only the first slider-item, which contains the name and description of the timeline which have been defined in the JSON data source.

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
	font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:10px 5px 5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
	font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
	color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
	color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
	left: -30px;
	position: relative;
	z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
	text-align: center;
}

The only thing left is to open up timeline.psd that is bundled with the download of the plugin, and change the color of some of the icons in photoshop. I have included the necessary files in the zip download for this tutorial. With this our timeline portfolio is complete!

Done!

You can use this portfolio to display not only your recent projects, but also interests and important moments of your career. Share your thoughts and suggestions in the comment section.

Join our newsletter and get our PSDs!19,406 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

182 Comments

  1. olivier says:

    This is just awesome!!!

  2. Bakir says:

    Daaaaaaaaaaaaaaaaaamn!
    It look's great! You are pro Martin!

  3. Philipp says:

    That's funny, I was searching for a tutorial to create a timeline a few minutes ago ;-)

  4. Kevin says:

    Wow, I hope I can find a use for this :)

  5. Martin, you have surpassed yourself on this one. Everything about this tutorial is truly stunning.

  6. olivier says:

    Doesn't work if I have more than 3 elements starting at the same date, it only displays 3 of them.
    Is is possible to add a vertical scroll if the height of the timeline is to big?
    Thanks,

    1. Martin Angelov says:

      This is the default timeline behavior, but the previous / next arrows still work so it is usable.

  7. Ozi says:

    This is amazing bro

  8. Matt says:

    If this could be turning into a WordPress plugin it would be GOLD!!

    1. Matt, if you haven't found it yet there is a timeline for WordPress: http://wordpress.org/extend/plugins/wp-simile-timeline/. I've used it to create a timeline for a client here: http://www.davidminch.com/new-york-architect-timeline. It's not easy to make it useable for a short duration of time though it's a starting point. Every time I upgrade the plugin the layout breaks... I have some cleaning up to do on it.

  9. Did see the library today and had an idea for making a tutorial.. Funny to see it here now ;)

    Nice article

  10. Franklin says:

    Awesome tutorial. Great job mate.

  11. Paul says:

    Hi found this plugin the other day this is a great demo of it thanks a lot.

  12. SMBR says:

    This is aWesome idea + aWesome work...

  13. Chackmool says:

    Hi is there a way to display from the newer events to the older??

    Regards

    1. Martin Angelov says:

      Modify data.json and replace "startDate":"2009,1" on line 7 with a year and month after your last event. This should make the timeline show the newest events first.

      1. ice70 says:

        Hi Martin, thank you for the tutorial, works a treat and looks great.
        I am also trying to get the items to appear in reverse and followed the suggestion:
        > Modify data.json and replace "startDate":"2009,1" on line 7
        > with a year and month after your last event.
        I have modified line 7 to:
        "startDate":"2019,1"

        This moved the opening page to the end of the sequence and then started the timeline at the next item:
        "February 2009
        My first experiment in time-lapse photography"
        and then the later events after this, just as before the modification.

        The title page also shows in the timeline then when you reach it.

        Have I misunderstood something here?

        Thank you for your help
        ice70

  14. Chackmool says:

    I dont know if its me or what but I download the demo and when I run it only says Loading Timeline... Why?

    Regards

    1. Martin Angelov says:

      Make sure you are running the demo through localhost, and not opening it from the folder where you've extracted it. You will need to run XAMPP / MAMP for this, otherwise you will face a security exception for accessing a local file.

    2. Jubic says:

      lol I was wondering about this too =/

  15. yiz says:

    This is awesome, I actually had a lot of fun reading through the timeline and almost forgot about the tutorial.

  16. Vitor says:

    Hou can i start the timeline a little more expanded ?

    1. Martin Angelov says:

      Expanding the timeline on load isn't mentioned on the site. It also doesn't look like this is supported from the unminified source code.

      Your best bet would be to simulate a click on the enlarge icon after the plugin is initialized with the .click() method.

      1. Kei says:

        How would using .click() work? Rather, I know *just* enough to back myself in a corner, and not enough to actually figure out what and where to use it to solve my current dilemma.

        Any response would be appreciated, even if it's just a point in the right direction

      2. You can set the following in your configuration while passing to CreateStoryJS() method
        start_zoom_adjust: '-10'

        1. Christian says:

          Hi Sethupathi, could you please explain in little more detail how to implement this in timeline portfolio code?

    2. Tom says:

      Hi Vitor

      Did you have a chance to sort this one? I would like to simulate at least 3 clicks... but no idea where to start...

      1. James Savino says:

        I too would like to expand the timeline by default, is this possible to explain how to do so?

        Thank you!

        J

    3. john says:

      Can you change the timeline to start in reverse chronological order from left to right? In other words, can the timeline start on the left side (as it already does) with the current date and end with the earliest date?

      I know you can check the box in the Embedded Generator to "Start at the End" but that just moves the timeline to work from right to left which seem cumbersome since we are accustom to working left to right.

  17. violacase says:

    Master piece!

  18. Mario says:

    This is amazing!! And it works great!
    But I've got a problem with the Google spreadsheet, if i add the url to:

    timeline.init("myurl");

    When I run it only says Loading Timeline...
    Do you have any idea?

    1. Mario says:

      This Problem is only with IE9, is there a solution?

    2. Martin Angelov says:

      I haven't tested it with a spreadsheet. I haven't touched anything on the plugin so you are seeing default behavior. Opening up your browser's console might reveal useful debug messages.

  19. This incredible! Can't wait to start playing with this!

  20. LulienJeme says:

    I love !
    You'r the best man !

  21. eko24 says:

    Good one, Martin !

  22. Rob Abby says:

    Very very innovative approach. I have been researching a new portfolio layout recently, and this may have just won out over isotope/quicksand.

    Cheers!

  23. Alex says:

    Fantastic work!!

  24. Alex says:

    Awesome tutorial...

  25. Ali says:

    You are amazing , this is awesome!.

  26. Drummer Boy says:

    I think it would be nice to add a feature that stops the video from playing if they click to the next timeline, other than that it's awesome as always!!! Thanks for the post!

  27. Iliyan says:

    Excellent work again ;)

  28. fuji says:

    Hello, i have a question, i want use this timeline for do a timeline but based on 2 hour only, so i have try date as that :

    2012,1,06,12,01
    2012,1,06,12,05
    2012,1,06,12,06
    2012,1,06,12,10
    2012,1,06,12,30

    ect but i found a problem , the bar in bottom is very compressed hour on hour

    How i can this work extended into minutes in 2hour ?

    Thanks it s a very good script

    1. fuji says:

      And then how i can put hour in french format ? thanks

  29. Awesome one!! Perhaps this indicates that you are indeed one of the finest web designers we have....Thanks for the tutorial

  30. Manolis says:

    The script is awesome!

    I have two questions though.

    Can I start showing events from the last one in the timeline to the first? like 2012 events show on load and then move back on the timeline to see others? Or, change the direction of time, like reverse the timeline?

    Second one, can you change the default zoom in level? Cause I have 10 events in 2010 and one event in 2000 so it looks weird!

    1. Martin Angelov says:

      Both of these questions were answered above.

    2. start_zoom_adjust: '-10', I have explained above

  31. Martin Angelov says:

    Thank you for the awesome comments!

  32. Dirk says:

    hey,
    great job. Can you also do this for Joomla 1.5 & 2.5 it would totaly fits in my website.
    Thanks a lot. You can also answer on my email adress.

  33. Ruth says:

    I love this! thank you for sharing your knowledge!

  34. Andrew says:

    Martin: thanks for putting this delightful demo together. I wonder, have you thought about how it could be modified for mobile/tablet browsers? If you shrink the screen window on the demo currently, the timeline disappears completely, the graphics do not shrink to fit, and the next/back nav also disappears.

    kind regards,
    AndyBean

  35. Mauro says:

    Hi, great timeline plugin, best I'v seen so far! Looks and work great on Ipad, the jquery transitions are not jaggy wow! My question is how to translate the displayed dates to another language like french? Thanks and really looking for the next updates.

  36. Paul says:

    the timeline is awesome but funny enough its NOT LOADING on Google Chrome

  37. Georgetta says:

    Hi Martin,

    Is it possible to pay you for customization?

  38. iluvenis says:

    Brilliant tut!

    A question, though:
    what's the name of the font you use in the "Timeline Portfolio" and "Johnny B Goode"?

    Thank you!!

  39. manozr says:

    its out of the world. superb.

  40. Krzyho says:

    Perfect! ThankU so much!

  41. Christian says:

    Great tutorial and impressive portfolio.

    I do have some questions that I hope Martin or someone from the comments can answer.

    I would like to have the date displayed in the way it's displayed in many countries besides the US and Canada: How do I change it from displaying i.e. November 8, 2000 to 8 November, 2000?

    Also, how do I translate the months? For countries where the months are spelled differently).

    1. michel says:

      I also need the date in "day - month - year". However, excellent tutorial!

      1. Elkana says:

        Yes, I need to translate it too to day-month-year. I LOVE this tut and the TimelineJS from VeriteCo <3

  42. Leandro says:

    I appreciate this a lot, I've been looking for a good timeline for ages, and this is perfect! Is there any way to enlarge the space between events? Some of them can't be read because they're too close.

  43. Matt says:

    I'm impressed, this timeline style is so fucking AWESOME
    Thank you!

  44. karim says:

    Hi,
    Is it possible to display images in timeline from sql database?
    if yes, plz explain me..

  45. Tom says:

    Hi there

    On my PC downloaded demo works fine. But when I've uploaded it onto web:

    - in Explorer 9 I have 'Internet Explorer 7 is not supported by Timeline.'
    - in Firefox 11 I have constant 'Loading Timeline'

    Can you help, please?

  46. Harry says:

    Love the Theme! Really Wana Use it! Just wandering is there was a way to implement a thumbnail selection for images on one of the slides, so each slide represented a set of images. I'm just trying to think of wait to show my Photography work without having dozens of slides. Thanks for the Theme!

  47. Jack says:

    Hi, thanks for this awesome tutorial. I just have one question if you could help :
    I will like to put some HTML instead of images,videos...in the media section. Could you tell me how could I do ? Because I tried but it's not working.

    Thanks

  48. Jacob Lee says:

    Hey this is awesome!

    Do you know if it's possible to add markup inside the 'media' tag? I'm trying to embed a video instead of linking to it

    Cheers

  49. Anthony says:

    This Timeline portfolio is way better than the ones I've seen lately. Thank you very much for this great tutorial. Although I have some questions in my mind:
    - Like there is an tutorial that explain how to customize
    - Can you explain more deep about achieving 3D Effect
    - And last thing, can you recommend a collection of templates?
    Best regards, Anthony!

  50. Zion says:

    Good Job!! It's possible link to single slide?! Tanks..

  51. e11world says:

    I just saw something similar the other day but this is much nicer for full width as well as a little better in design. Great implementation!

  52. Abel says:

    Could you please help me.
    I can't seem to figure this out. The page keeps saying Loading Timeline.
    You can see it in http://ecom.freshweb.com.pt/timeline/

    1. Patty says:

      Hello Abel... i've just checked your link and it's working... how did you fix the problem?

  53. big says:

    How to create a schedule from the earliest date to the oldest?

    Timeline:
    > 2012 ,05
    > 2012 ,04
    > 2011 ,09
    > 2011 ,06

  54. Peter says:

    having trouble with Google Spreadsheet data soure
    won't load timeline in any browser.

    Looking at the console:
    VMM.Timeline.TimeNav
    timeline-min.js:1init
    timeline-min.js:1DATA SOURCE: GOOGLE SPREADSHEET
    timeline-min.js:1["key", "output"]
    timeline-min.js:1Uncaught TypeError: Cannot read property 'length' of undefined

    ideas?

    1. Bruno says:

      Same here...
      Uncaught TypeError: Cannot read property '$t' of undefined

  55. Bharath says:

    Its a Great Plugin. I thought of Presenting my CV ina Timeline format for which i thought of creating my own timeline.

    But you made me totally upset(just kidding). This is what i was planning to do.

    But you Won!.

    Great Job and Looks very neat.

  56. joenhe says:

    how I can change the language of the time?

    1. Mak says:

      Hi joenhe,

      ok, i found
      In order to change the language of the date/time, it's necessary to modify the file timeline-min.js
      You can change the structure .. otherwise you can also translate each word in your favorite language

    2. Alex says:

      Go to http://timeline.verite.co and download the package.
      There is one example of this.

  57. Marian says:

    Finally!! This is what I've been looking for! Thanks Martin for this great plugin.

  58. Alex says:

    About the reverse mode, in the full javascript file (not minifield), there is a option in config var, "start_at_end". Change for true, then the timeline goes to the end.

    Bye guys!

  59. daniel says:

    Hello, I would like to know how to change the months of the Spanish language.

    thank you very much

  60. Phoenix says:

    What a fantastic effort. Very cool.

    Couple of things though: can we make the time line in reverse chronology? Latest first..

    Secondly, it would be great if this were "responsive". To be displayed on all devices, especially tablets!

  61. Lester Mallari says:

    Hi,

    Can I implement this to my tumblr? Please email me. Thank you. :)

  62. Ananda says:

    this is just awesome. Thank for making such a great portfolio example out of timeline. I was searching for exactly the same stuff.

  63. aashish says:

    U guys are the best! I needed time line on my website but I opened your website to look what you guys have published new.. and voila.. I found the thing that I was looking for the most.

  64. Wagner says:

    How do I change the date format for day, month and year?

  65. Anntina says:

    Wow,It's perfect

  66. Philipp says:

    My timeline is not loading there's only the text "LOADING TIMELINE" but nothing is happening.

    1. Philipp says:

      Ok, I found the error, I had at the end one comma.

  67. Steve says:

    Great script!

    I've plotted several events that span over a period of 6 months - the events looked squished in the timeline, but great if I manually zoom in.

    Can I set the zoom to be in further?

    Steve

  68. Abe says:

    This site is amazing.. Thanks a lot

  69. flash says:

    Just wondering, any thoughts on how you can default the timeline to todays date (or nearest event in the time line to today)?

    Fantastic site and full of excellent examples and resources! Great job.

  70. Peter says:

    This is a great library, I appreciate your wonderful work! I am wondering if it's possible to show the timeline in just half the window size? I seems to me that the video thumnails have a minimum height (To me, it's like 402px). Is there a why to get over this?

    Thanks.

  71. sağlık says:

    Couple of things though: can we make the time line in reverse chronology? Latest first..

  72. Marc says:

    Hi Martin,

    I've tried to reverse the chronology of the timeline by following your instructions:

    "Modify data.json and replace "startDate":"2009,1" on line 7 with a year and month after your last event. This should make the timeline show the newest events first."

    It didn't actually work. It would be good to keep the Johnny B Goode intro page and have the timeline be from most current on the left to oldest to the right. I tried reversing the years under the startdates as in latest first, but that totally messed up the timeline.

    Please advise what I need to do to reverse it. It seems others have the same question as well?

    Coolest thing you did, wish I was a genius like you!

    Thanks!

    1. sa says:

      About the reverse mode, in the full javascript file (not minifield), there is a option in config var, "start_at_end". Change for true, then the timeline goes to the end.

      Bye guys!

      1. Tina says:

        Hi SA.

        I'm not really the sharpest javascript coder, so I can't really seem to locate the full JavaScript file which is needed to change the "start_at_end" config var.
        Could you instruct me as to how I can find this full javascript file?

        (Sorry for the rookie question)

        1. just add this : start_at_end: true

          <script>
          	$(document).ready(function() {
          		createStoryJS({
          			type:		'timeline',
          			width:		'100%',
          			height:		'100%',
          			source:		'example_json.php?c=99',
          			embed_id:	'my-timeline',
          			debug:		false,
          			start_at_end: true
          		});
          	});
          </script> 
          
  73. Sasee says:

    Hi,

    Ive downloaded the demo and uploded to my server, but it doesn't work. Just shows loading timeline.

    Any idea why this happens?

    regards,
    Sasee

  74. KGB says:

    First, thanks so much for making this tutorial.

    I'm having some issues (probably just a lack of knowledge) but if anyone can offer up some help I'd appreciate it.

    1) I basically want to wrap the entire timeline with my own graphical border. I have tile-able images that I basically want to have as a border for the timeline. I cannot seem to figure out how to have them display ontop of the timeline. When I refresh the page, the top border displays, but then the timeline over takes it. I have the z-index set at 1000, but still no go.

    2) My timeline needs to display clock time. I add the time to my json file, and it's displaying it fine it seems, but it doesn't show 30min increments. Just 1hr. It also doesn't seem to do AM and PM. So, 1pm is shown at the beginning of the timeline before 3AM (both are the same date).

    1. KGB says:

      Got it all figured out. Thanks

      1. Kostas says:

        Hey man could you share your solution? I would like to display clock time also and it would be great to have some info before i start. Thanks in advance

        1. KGB says:

          Sure.

          I'm using JSON as my data.

          It was merely changing the "startDate":"1862,3,8,14,20", format.

          The format is: year, month, day, hour, minute

    2. SAM says:

      Hi,

      How do you display current date & time on json file?

      Thanks

  75. Sreejesh says:

    Fantastic design and great that you shared it with your users. This is something unique concept I've ever seen. More than just awesome!

  76. Mike Loucas says:

    It dose work in Chrome (YES Chrome) but I noticed it has to be on-line to work, but for testing and building off line, you can use Netscape... I mean Firefox, LOL.

    This is not a golden answer, I just noticed once I uploaded it; it started working in Chrome, so this tells me the files I downloaded DO WORK!. :)

    So build locally offline in Firefox, OR build your example on-line Remotely; so as your changers are saved it uploads the copy to you server, and tests it in Chrome all in one shot.

    PS. you can use EI for offline testing (it works) but why would even turn that Browser on? and you are building off line grab all the Remote files and change all the links (in index) to be local...

  77. Thilina says:

    "startDate":"2013,1,10", yes we can add day of month also
    Thank U

  78. Carl Hayes says:

    Martin,

    Very nice work. I'm not a graphic or web designer, but this plug-in holds promise for presenting events in a chronological fashion. I work in the legal community presenting evidence inside the courtroom and at mediation. Is there any way to format the date in the plugin so that it could display specific dates (i.e., October 6, 2009 instead of October 2009)?

  79. Danny says:

    Great work ! Martin!!

    This is the very new and fresh idea and design to me.
    Thx for the information=)

  80. James says:

    Great tutorial for a great plugin, picking up on other comments, it would be fantastic to see a solution (as in a snippet) to set the expand level on load.

  81. Amandine DAM says:

    Hello,

    Thank you for this awesome tutorial, I would like to change the name of the author "Johnny B Goode" it is in h2 of the the HTML, but when I open my index.html file, there is not h2 at all, how can I change it please ?

    Thanks for reply.

    1. James Perrone says:

      on the data.json

  82. kumar says:

    Amazing tutorial martin

    Thanks for the tutorial

    I have a question though . I see that the order of events are in ascending from 2009 - 2010 , how do i make it in descending order

  83. amiit says:

    Hi

    Great work man.I just need a little help from you with this timeline.
    I want to display more than one image for the same event.How to do it??
    I really need this work to be sorted out as soon as possible.

    Thnx in advance

  84. Offir says:

    Is there a way to include multiple images per date? Like have a small showcase or open a query gallery of sorts?

  85. George says:

    Hi Martin.
    Thanks for the tutorial, great job!
    I have a question, how can I control content container box width of the particular event at timenav part in sync with event-line, in other words if the event lasts 6 months, I want to show the box width is extended across 6 months.

    thanks a lot in advance
    George

  86. teardrop.smile says:

    Hi everyone!
    I'm quite new in CSS and all this world. I'm workin' on a website because at last our webmaster had something else to do (don't know what) so i'm trying to fix a website. I really like this tutorial because it's perfect for what i have to do. Just some problems: i tried to modify the html code in order to update text and images/video, but it doesn't work. Anyone can tell me where the problem is?

    Thank you so much for reading!

  87. DGT says:

    A fantastic timeline solution... And some great development by end users here. Love the darker theme Martin and downloaded it as a starting place for my timeline. Thanks for sharing.

    I wish to use the timeline and 'package' the end product onto a data CD/DVD to send to non computer literate relatives overseas so that they can simply open the index.html in their browser regardless of Internet connectivity i.e. run it completely offline

    Can readers offer advice whether this is possible with the timeline data held in a json file and associated images and videos saved on the same disc? Will the browser deal with the js content or does it need server side processing of the json data?

    I'm not a developer but an enthusiastic user of Dreamweaver 5.5 so can follow some degree of technical advice. Only ever done static HTML and flash before.

    On a related note, I'm currently struggling to run it in local host as wampserver 2.2 freshly installed doesn't want to work. Though I can see my timeline building in the Live view window of Dreamweaver I can't see the finished article previewed in Chrome as I would like. I will persevere, it appears that apache doesn't want to start or my local host settings are wrong! Can anyone recommend the best way to run a local server in Vista.

    Exciting stuff guys, keep sharing! Well done Martin!

    Darren

  88. Peter says:

    I love your timeline ;)

  89. Krishna S L says:

    Hello Martin,

    Thanks for your wonderful tutorial. It is very well conceptualized and written and found it very useful.

    I have the same question similar to others, how to do the timeline in reverse order. The answer you have suggested dint help. Might be we have misunderstood. Can you share us the demo for the same. "start_at_end" will still have it in the same order but just zooms to the last event. Modifying "startDate" dint seem to help.

    Also, assume the timespan is for 12-15 years, as we zoom into the year, the timeline lables doesn't show month labels. Any idea how we do this? Your help is much appreciated as it helps most of the people who have posted similar comments.

    Thanks,
    Krishna

  90. Hi Martin,

    Awesome work martin but if we have less then or equal to three events in our timeline then it will break. Can you please tell me solution of this problem?

    Thanks.

  91. Nick Fox says:

    How would I be able to put this timeline function within a page on any of my sites current pages?

  92. Abhishek Goel says:

    Hey its a very good control and very usefull for my application.
    But in my application I want to display the timeline scale i.e. "Navigation DIV" only means I want to hide the slider above that timeline scale i.e. "feature" DIV.

    For hiding that I have written the following code :

    #timeline .feature{width:100%;display:none;visibility:collapse;width:0px;height:0px}

    By putting this css the feature div got collapsed BUT the Problem is that the "MOUSE DRAG GOT STOP" in the Navigation Div Timeline scale.

    Please help me out!! Is m doing something worng or I have to update some more css to achieve the same.

    Thanks in Advance!!

  93. Abhishek Goel says:

    Hey Can I get the full version of TimelineViewer.js coz in download zip there is minified version (timeline-min.js) of js file.

  94. pizza-bob says:

    hey everybody - the FIRST WORD at the top of this page is Timeline - the link to the timeline code and all sorts of info - can nobody read?

    Timeline (http://timeline.verite.co/)

    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.

    http://timeline.verite.co/

  95. Abhishek Goel says:

    Hello All, I am using this timeline viewer in my application and I am facing some issue with that "Month and day labels are not shown when the time difference is comparatively higher".
    for example, the day label is visible if the time period is in the range like: start date 2011,12,25 end date 2012,1,26 but if the difference if large for example
    start date 2011,6,25 end date 2012,1,26 the label for the days is not visible when we zoom in the timeline to the maximum extent.
    Same is the case when the year gap is large the months label are not visible.

    Please help me out!!!

    Thanks & Regards,
    Abhishek Goel

  96. James Perrone says:

    Thanks got only one question. This works for years and month. But I want to make one time line that only gos for 2 months so I want to work like: 2012, july, 23. Can I do this on this script? pls help and thanks

  97. DaveG says:

    Awesome demonstration of using this timeline control.

    Is it possible to dynamically add events using javascript? I am asynchronously fetching data from several sources and need to load these as they arrive to my timeline.

    Any pointers on this really appreciated!

  98. Juan Carlos says:

    Hi! the timeline work on my mac, but online it dosent work i just change images but when i upload it to the server the web page just say it´s loading. What i can do?

    1. Ana Elizabeth says:

      Hello!!

      do you have the solution?
      I have the same problem.
      Would you help me?, please

      thanks

  99. Sara says:

    Thank you SO much for this!! I've seen a WordPress theme some while ago that uses this in a drawing/art portfolio theme, I was wondering how it was done and here's the answer! Thank you so much! I just had my web developer's "ah-ha!" moment! =)) Knowledge is amazing!

  100. Cristian Rusu says:

    Can we have items set by day?

  101. SuryaPavan says:

    If I am not using timeline-min.js, and using un-packed version ie, timeline.js... its not working! :(
    please someone help me

  102. xntwx says:

    how combine the timelineJs with a database? thanks for the answer :)

  103. Ted says:

    How do you add scrolling just to the text container that is on the left side of the image area. I tried adding overflow: auto and scroll to various classes int he style and timeline css and it did not work.

  104. aswin says:

    awesome !!!! pure creativity and beautiful implementation !!!

  105. Sheri Harvey says:

    Love the idea, would like to use it for my own portfolio timeline. I am having trouble with the dates. When I change the date.json file to start in 2006 the bottom dark numbers don't change and the hash marks don't move to 2006. I looked at the file in firefox with firebug and I can see the "class="time-interval-major" in firebug but where is it in the html file? I am using Dreamweaver to make my edits.

  106. remo says:

    Hi is there any way to load data from a JSON object or a web server json response?

  107. Craig says:

    Is there a way to set the width and height of this timeline, so you can include your site design's headers and footers?

    1. Marcos says:

      i'm having the same problem

  108. Fanzy says:

    Freaking Awesome!!!

  109. Thanks a lot bro always wanted to create a timeline using Dojo but this is superb gonna convert it to a Zend Application, my aim is to create an anti-police website with a timeline of people killed by the police...

  110. Peter says:

    Hi,

    I know you mentioned to use XAMP/MAMP...however, when I post on our IIS server and ping it through the browser, I'm still seeing Loading Timeline.

    I'm planning on using this on our Intranet site, so should I tell our network admin to flick a switch, or can I do something on my end?

    Thanks, and great work!

    Peter

  111. Ana Elizabeth says:

    It's amazing! You are great Martin!
    ..but what can I do if I need the translation to Spanish?
    and what happend if I need that it works with Google's spreadsheet, what is the code and where I have to put this code??

    Thank you very much!!!!

  112. Gaddy says:

    Great work Martin, Great Design and Great Functionality.

    I have a question though. The timeline is working perfectly and i have added my data into it. I would like to know if the heading and the text in each slide can be made to a hyperlink. So that it will link to the orignal source?

  113. Ite says:

    How would i put a pdf file or text as the content instead of a video or image?

  114. Sophie says:

    Could anyone tell me how I would change the size of the timeline? I want to put it inside a box. I tried creating a separate div and putting the code in there but it doesn't work. Any help would be appreciated. Thanks!

  115. Dr.reza says:

    just shocked again, u rocks man!!!, it's really awesome.... tnx a million

  116. Amin says:

    Thanks a lot

  117. Ariwa says:

    Hi,
    Great work Martin,
    your code works correctly on a small file (data.json) but it displays loading timeline when the file is large (136k). Have you a solution so that I can display the timeline if the file data.json is large because it contains a large text ("text":" ",)

    Thanks.

  118. Elkana says:

    Okay, I've got the dates translated. Now I have to set the order from Augustus 25, 2012 to 25 Augustus 2012... Sniffin' around in the mess of timline-min.js ... ...

  119. martin says:

    I see several request about zoom level at start. The answers however are very strange. Not one is pointing where to put what code. Example: Configuration file??? where it is? Of course easy if you know where to put it in what code format, but please.... give us a good example!

  120. Arshad says:

    Hi

    I m New to PHP and I want create a website that search a product from a different website (choice of client) But I have no Idea plz Help me

    Thanks in Advance

  121. Alex says:

    One more question, I want to post some entries in the January month but it doesn't appear. What lines should I change?

  122. Hello Martin,

    This is a great tutorial! But i'm working with google docs and import my google docs sheet into the timeline. (Otherwise it wouldn't fit on my page) but i wanted to color it black. Can you do this?

    Because if i use your tutorial it doesn't fit and it crashes :(

    Cheers,

    M. Willems

  123. Marcelo Araujo says:

    hi, i need to use accentuation in texts and use other special chars. in mine texts are 'disformattig', strange chars. any suggestion? i already try o tchange utf-8 to iso, but have no sucess. thanks. cool job!

  124. Br1nC says:

    Hi

    how can I set the timeline to 2000 b. c.
    is that possible? or is not.

    please help me

    1. Shari says:

      make the date negative. for example, -2000 should be 2000 b.c

  125. marcelo araujo says:

    hi, i make some changes and in IE and chrome are ok, but in FF only 'loading...'. any idea? tks.

  126. Shari says:

    Hi Martin.

    Realizing that you wrote this tutorial quite a while ago, by any chance, do you know how to change where the media shows up on the timeline? You have it in various places on yours (left, right, below) so I thought perhaps you could explain what you did to achieve that. On mine, it only shows up on the left side. (for example: http://johnsonandbell.com/timeline-test/#11) and if I can only have it one way, I'd really like it to be on the right side. Is the bottom placement only available when you don't have body copy?

    I'd appreciate any help you can provide. I've posted to the GoogleGroup for TimelineJS (VeriteCo) but to no avail.

  127. Adrian says:

    Hi, saw that in your demo the timeline has dynamic height. In the original implementation it doesn't, where I can find that piece of code, is it css or jQuery?

  128. Parul says:

    hi
    martin,
    this is awesome timeline example. i had use this in my website. but i have a some problem. its working fine when its online. but when i published it on server its not working. just display "loading time"....any body can guide me please?

    thank you in advance.

  129. Jitendra says:

    Excellent work man.
    I have downloaded it and reviewed it on Google Chrome but unfortunately its not work for me. I was missed something? Please help me on this. Its working on all other browsers except Chrome.

  130. gautam says:

    Hi,

    Thanks! it is very use full for me. I have some problem while running it with Google Chrome. It only says "LOADING TIMELINE', while I opened an error console it says:
    "XMLHttpRequest cannot load file:///C:/Users/GGPatel/Downloads/timeline-portfolio/data.json. Origin null is not allowed by Access-Control-Allow-Origin."

    Can you please suggested why this is happening.
    Note: In all other browser than Chrome it works fine.

    Thank you,
    Gautam.

    1. Daniel Ryan says:

      I am having the same issue, have you figured out how to get yours to work?

      1. Greg B says:

        This does not load in chrome. has anyone found the solution?

        Thanks

  131. hidabe says:

    I want integrate it with: https://github.com/hidabe/portmagic

  132. Marie says:

    Hello, I have problem with the

    "startDate":"2010,2,10",

    its outputting to March 10, 2010 instead of February 10 2010. It only does it after line 268. If I change the start date before that line to February it works. Is there something you help me.

    thanks,
    Marie

  133. Rainer says:

    Hi.
    Thanks for the great tutorial. I am using it on www.festivalabierto.com/timelineFA/

    I noticed a bug though. When I added youtube content the timeline freezes when I try to go forward to a future date or backwards. The entire page freezes up with non of the clicks taking me anywhere. Is this a bug? How can I fix it? Has anyone had issues?

  134. Rafael says:

    I can't get make timelineJS work in remote server. Only local. Local is all ok, but when i put in remote server stay ever with the loading timeline and nothing happens. Anyone can help?

  135. Enric says:

    Hi Martin,

    Great tutorial, but I have a rather earthly question for those non-techies like myself: <b>how do I implement this in a WordPress environment? </b>. I've tried using several adapted WP plugins for VéritéCo's timeline (such as timeline-verite-shortcode.0.9.7, even Vérité's own TimelineJS-Wordpress-Plugin-master) but they're all full of bugs which require -as per their forum responses- too many tweaks that I am not capable of doing (I don't know JS or PHP, simply a bit of HTML).

    <b>So if I wanted to add your code to a WP page, how would I proceed?<b> -please use an idiot-proof response :)

    I know the Google spreadsheet solution for data is very convenient, but if necessary I don't mind editing a raw data.json file.

    Any hint/tips will be greatly appreciated!

  136. Ricardo says:

    has anyone actually got this working in inverse order. (newest first) i've tried everything on the comments and the plugin site doesn't really have much of config.

    Not sure what I'm doing wrong
    Please advice THanks

  137. Paulo R. M. Sorrentino says:

    I had the "loading timeline" problem as well.

    In my case I was able to find out that the page did not find the data.json file because my web server (I was running IIS locally) didn't know the ".json" extension/MIME Type.
    So I added it as "application/x-javascript" and all was solved!

    Hope this helps!

    1. Ben says:

      Hi Paulo,

      Can I ask where you added "application/x-javascript"? I think I'm having the same issue as you were, I'm new to web developing so not really good at understanding a lot of the terms being used.

      Thanks heaps, Ben.

      1. Shirley says:

        It is easy.

        "application/x-javascript"

        IIS doesn't recognize file of type .json

        Solution

        Add a MIME type to IIS (at server level)

        To allow it to serve that type of file.

        Open IIS Manager and select server properties
        Click the "MIME Types" icon
        Click "New"
        Enter Extension = "JSON" and MIME type = "application/json"

        thats it and it works seamlessly

  138. Divyasree says:

    Nice tutorial .... I used this in my site

  139. Roy S says:

    Very well done mate, very impressive and I'm definitely going to use this!

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links