This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, January 30, 2009

Elegant animated weekly timeline for websites

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 Preview


HTML 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:


Add this code:

<div id="slider-stage">
</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>

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">
<li > </li>
<li > </li>
<li > </li>
<li > </li>
</ul>
</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>

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>

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
});

// 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);
}
}
})
});
</script>

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

blog comments powered by Disqus
JesusFreak said...

Goood work...

Brian said...

MooTools 1.1?

Ralph said...

A great idea like always. Thank you for your job. Ralph

Tudor said...

nice tutorial. too bad it's in mootools.

Gianluca S. said...

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.

Zsole said...

Very nice Woork!

panduan bisnis online said...

wow...thats cool! thanks antonio!

Sérgio Soares said...

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

R. van der Veen said...

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

LawrencE said...

how you guys are genius??

Any tut for becoming genius like you :)


Thats antonio!
great style, great woooooork!

Bleyder said...

Yes, good work Antonio

mim said...

Great tute!
ty

liberar móviles por imei said...

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.

carlo said...

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!

Tiago Celestino said...

Great tutorial.

Bryce McDonnell said...

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/

giles said...

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?

Carlo said...

La bella timeline l'ho usata per il sito di Dedica a Paul Auster
http://www.dedicafestival.it

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News