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 !
