Yesterday my friend Nick asked to me some suggestion to design an original weekly timeline for a web application which he is developing. I suggested to use the following animated timeline which I implemented reusing the code of my versatile slider and now I want to share with you.
This tutorial explains how to design an elegant and animated weekly timeline, with daily annotations, you can customize and reuse quickly in your web projects. This is the result:
Take a look at the live preview and download the source code.
Download this tutorial
Live PreviewHTML structure
I reused the same structure of my versatile slider: a layer (DIV) and a simple list (UL). Create a layer which is the container of the timeline:
<div id="slider-stage">
</div>
</div>
...then add a new layer slider-button to create two buttons to move, to the left and right, the timeline contained into the div slider-stage:
Copy and paste this code into your page after the div slider-stage:
<div id="slider-buttons">
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>
<a href="#" id="previous">Previous</a>
<a href="#" id="next">Next</a>
</div>
Now, take a look at the timeline structure. It's exactly the same I used in my slider (for more detailed information read this post):
Each <li> element is "a day". Copy this code into the slider-stage DIV:
<div id="slider-stage">
<ul id="myList">
</div>
<ul id="myList">
<li > </li>
<li > </li>
<li > </li>
<li > </li>
</ul><li > </li>
<li > </li>
<li > </li>
</div>
Now, for each day, you have to create this structure:
I used some CSS classes and <p> tag for daily "annotations" and this is the code:
<li>
<div class="day">1
<span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
</li><span class="day-text">Monday</span>
</div>
<div class="month">February</div>
<div class="year">2009</div>
<p>Dinner with Sara</p>
You can use PHP or another server-side language to get dinamically annotations regarding a specific date.
JavaScript Code
Now, take a look at this simple script to enable slider features I wrote in this post. I used MooTools to implement this script so, you have to add this link into the <head> tag of the page where you want to use this slider:<script type="text/javascript" src="mootools.svn.js">
</script>
</script>
Now, copy and paste this code below the previous line of code to enable scrolling features (you can also copy this file in an external Js file and import it into the page):
<script type="text/javascript">
window.addEvent('domready', function(){
// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
});
</script>// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
// FX var
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
// Previous Button
$('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
}) $('previous').addEvents({
'click' : function(event){
if(totIncrement<0){
totIncrement = totIncrement + increment;
fx.stop()
fx.start(totIncrement);
}
});
// Next Button
$('next').addEvents({
'click' : function(event){
if(totIncrement>maxRightIncrement){
totIncrement = totIncrement - increment;
fx.stop()
fx.start(totIncrement);
}
}
});
That's all. Download the source code or take a look at the live preview. Add a comment for suggestions or other information.
Download this tutorial Live Preview
I am 
Goood work...
MooTools 1.1?
A great idea like always. Thank you for your job. Ralph
nice tutorial. too bad it's in mootools.
Very nice! But what about improving the HTML to be more semantic?
Something like
div id="slider-stage"
ul id="myList"
li class="day"
h3 1 span class="day-text" Monday
h4 class="month" February
h4 class="year" 2009
ul class="tasklist"
li class="task-item" Dinner with Sara
li class="task-item" Write a blogpost
With headers to display the date and an unordered list nested into each day it render quite well even without Javascript enabled.
Very nice Woork!
wow...thats cool! thanks antonio!
Hello Woork. Yesterday when i'm reading ur latest post i found this and i used this beautiful slider on my newest portfolio, wich inspired me to a new concept. Hope u don't mind. The url : http://www.altograu.eu/portfolio/index.html
I know i have a lot to do on the site, i.e. fix ie problems such as transparency.
Thanks. Love ur blog
Great article, altho I have some suggestions.
To get it to work in the latest version of Mootools (1.21):
The Fx.Style class has been removed and has been incorporated in Fx.Tween, so:
var fx = new Fx.Style('slider-list', 'margin-left', {
duration: 1000,
transition: Fx.Transitions.Back.easeInOut,
wait: true
});
Has to be changed to:
var fx = new Fx.Tween('carrousel-ul', {
property: 'margin-left',
duration: 500,
transition: Fx.Transitions.easeIn,
wait: true
});
Also, the code can be a bit "smarter":
// Declaring increment vars
var totIncrement = 0;
var increment = 214;
var maxRightIncrement = increment*(-6);
can be:
// Declaring increment vars
var totIncrement = 0;
var itemsPP = 6;
var increment = $('carrousel').getStyle('width').toInt();
var maxRightIncrement = -(increment*($('carrousel-ul').getChildren('li').length / itemsPP) - increment);
This fetches the wrapper div's width and the number of li's automatically.
You'll only have to set the itemsPP (items per page) accordingly. (That could be done automatically as well, but this way you can have multiple rows).
how you guys are genius??
Any tut for becoming genius like you :)
Thats antonio!
great style, great woooooork!
Yes, good work Antonio
Great tute!
ty
Hi , What changes should I make to add more DAYS ? Untill now i have only 9 days and i dont know how to add more.
Thanks.
Very nice! But what if I want my timeline start everyday 'today' (e.g. friday) AND scroll to prev monday and next sunday?
Thank you anyway, it's a great piece of code!
Great tutorial.
Great tutorial! I've implemented it on a site we're working on. Thanks.
In testing, we found one or two improvements. It's probably too much to go into in this comment, but I posted a couple of fixes in my own blog post here: http://blog.brycemcdonnell.com/mootools-content-slider-javascript/
I'd love to see a twitter feed/life stream integration, that would populate your updates along the correct timeline.
Anyone know how to implement such an idea?
La bella timeline l'ho usata per il sito di Dedica a Paul Auster
http://www.dedicafestival.it