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.
Elegant animated weekly timeline for websites
This is the result:
Take a look at the live preview and download the source code.
HTML structure:The slider uses 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.
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.MooTools are used 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):
Take a look at the live preview and download the source code.
HTML structure:The slider uses 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.
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.MooTools are used 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.
|
