JQuery: how to present animated slides

27 March 2009 488 views View Comments

» vCard | lsd@twitter | the Japan serie | lsd@tumblr | lsd@flavors.me

So often we need to make up some animations, some images rotating or a presentations that requires a bit of animation; Flash seems to be the only way but if you are, like me, a person who hates Flash (it’s indeed heavy sometimes) you’ll love this little tutorial on how to set up animated slides using JQuery.

What is JQuery anyway?
It’s a javascript library that allows you to have a whole serie of functions to be used in such easy way in every webpage without loosing time nor loosing appeal.
There are several libraries available and each one of these shows its own attitude on some operations, in this case we’ll see how to snatch up web pages.

Starting from a simple HTML code for an example HTML page:

<div id="container">
<div id="content">
<div id="first">Mary had a little lamb</div>
<div id="second">Its fleece was white as snow</div>
<div id="third">Everywhere that Mary went</div>
</div>
</div>
<div id="menu">
<a class="first" href="#">First</a>
<a class="second" href="#">Second</a>
<a class="third" href="#">Third</a></div>

You can see the structure is equal to the ones used to create three columns layouts, while you can notice more differences in the CSS sheet:

div#container{
margin:0px auto;
width:600px;
height:300px;
background-color:#ffffff;
overflow:hidden;
}
 
div#content{
margin:0px;
width:1800px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}
 
div#content div#first{
margin:0px;
width:600px;
height:300px;
background-color:#cc0000;
float:left;display:inline;
}
 
div#content div#second{
margin:0px;
width:600px;
height:300px;
background-color:#ffffff;
float:left;
display:inline;
}
 
div#content div#third{
margin:0px;
width:600px;
height:300px;
background-color:#cccccc;
float:left;
display:inline;
}
 
div#menu{
margin:0px auto;
width:600px;
background-color:#ebebeb;
}

As you can see the “content” has a defined property overflow:hidden and the width of the contents it’s higher than the father element; this kind of choice is needed to obtain the slide effect where, for everz click on a link it’s gonna be shown a different page that moves to show the next one.
To animate every page it is necessary to insert, in the page, a link to the JQuery library and some code to define the desired actions.

<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
$("#menu a.first").click(function (event) {
$("#content").animate({ marginLeft: "0px"}, 500 );
event.preventDefault();
});
 
$("#menu a.second").click(function (event) {
$("#content").animate({ marginLeft: "-600px"}, 500 );
event.preventDefault();
});
 
$("#menu a.third").click(function (event) {
$("#content").animate({ marginLeft: "-1200px"}, 500 );
event.preventDefault();
});
});
</script>

Code starts with:

1	$(document).ready(function()

This function is needed to understand when a page is loaded and it is possible to run the script (for javascript users: that’s the equal to the onload function).

1	$("#menu a.first").click(function (event) {

With this function we can define an event with which we can start the action, with a click in the “first” class in the menu.

1	$("#contenuto").animate({ marginLeft: "0px"}, 500 );

The “animate” function we can modify the left margin of the “div” making it move in the corrispondent position of the desired content.
Having three width 600px “div”, it’s easy to subtract 600px margin to the “div content” so to show the next.

The last part shows how the browser should folow thegiven link so not to fall into a different page:

1	event.preventDefault();

That’s important if you wish to have a valid alternative to those users who set off javascripts.
You can add more tags and make this script more powerful, anytime.

Original article: Mauro Accornero

Tutti gli articoli e le immagini presenti su ./lsd sono fruibili sotto licenza copyleft e protetti da Safe Creative; le immagini di terze parti sono protette da copyright dei rispettivi detentori.