Fading pagination system in 4 lines of javascript.

A friend of mine was asking for a multipage javascript navigation sample for a website. He wanted a main content (subdivided in 3 squares) with two navigation arrows.
By clicking the arrows he wanted the main content squares to fade out and fade back in with a different content.

You can see a working demo (and source code) here :  http://www.liquidgate.it/tests/pagination.html

Ignoring the basic crappy CSS here is the sample I did for him.

A 4 lines of javascript pagination or contet swap system  :D

var _speed = 500; 
function mostra(_tohide, _toshow) 
{ 
 $('#'+_tohide).fadeOut(_speed, function() { 
     $('#'+_tohide).hide(); 
     $('#'+_toshow).fadeIn(_speed); 
   }); 
} 


$(document).ready(function() {

$('#pagina2').hide();
$('#pagina3').hide();

});

The script simply is a single function that accepts two parameters, the ID of the element to hide, and the ID of the element to show.

While the html looks like the following.
3 pages are created the same size, the page2 and page3 are hidden as soon as the document is loaded (see previous javascript on document.ready).


<div id="container">
<div id="pagina1" class="pagina">
<table>
<tr>
<td class="pagebutton">SIN</td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb blah blah blahb blah blah blahb blah blah blahb<br>
blah blah blahb <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
</div></td>
<td class="pagebutton"><a href="javascript:mostra('pagina1','pagina2');">DES</a></td>
</tr>
</table>
</div>

<div id="pagina2" class="pagina">
<table>
<tr>
<td class="pagebutton"><a href="javascript:mostra('pagina2','pagina1');">SIN</a></td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td class="pagebutton"><a href="javascript:mostra('pagina2','pagina3');">DES</a></td>
</tr>
</table>
</div>

<div id="pagina3" class="pagina">
<table>
<tr>
<td class="pagebutton"><a href="javascript:mostra('pagina3','pagina2');">SIN</a></td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td class="pagebutton">DES</td>
</tr>
</table>
</div>
</div>  <!-- container -->

And the style of the page looks like this :


#container { border: 1px solid #ff0000; width: 900px; } 

.pagina { width:900px; } 

.pagebutton { vertical-align:middle; text-align:center; } 

table { width: 900px; border:none; } 

table tr { vertical-align: top; } 

.squarecontent { width:250px; }

As you can see every "button", I've used some plain A links for simplicity, calls a function with two parameters that fades out the content using fadeOut jquery function and makes another page visible.

You can create a very simple pagination system, or content swapper very easily.
Try to cut & paste this code into a new HTML document, include the latest jQuery and happy experimenting !