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
0 comments