Finalmente torno a scrivere su questo blog. Dopo le vacanze e l’inizio di una nuova avventura lavorativa, ho finalmente trovato il tempo per tornare a scrivere in queste pagine. L’articolo di oggi prende spunto dai commenti ricevuti da un utente ad un mio vecchio articolo: jQuery: realizzare un effetto fade come nell’home page di Google.
Nell’articolo avevo realizzato un semplicissimo script che replicava l’effetto che troviamo nell’home page di Google. L’utente Pierpaolo voleva realizzare qualcosa di simile in cui, una volta mostrato il contenuto completo della pagina, voleva avere la possibilità di mostrare/nascondere nuovamente il contenuto attraverso un link.
Nell’articolo di oggi vedremo come realizzare questo semplicissimo script attraverso pochissime righe di codice jQuery.
Codice HTML / CSS
Il codice HTML di cui necessitiamo è piuttosto semplice. Abbiamo bisogno di un div contenitore in cui saranno inseriti tutti i contenuti della pagina e un altro div che conterrà il link utilizzato per mostrare o nascondere i contenuti.
Lorem ipsum dolor sit amet
...
Nascondi Contenuto
L’unica cosa che dobbiamo notare è l’assegnamento di una classe hide al link.
Per quanto riguarda il codice CSS, invece, oltre al normale stile della pagina, abbiamo bisogno delle seguenti regole:
a.hide { background: url('exit.png') no-repeat; }
a.show { background: url('show.png') no-repeat; }
Sono le due classi utilizzate per mostrare un’icona differente a seconda che il link dovrà mostrare o nascondere il contenuto della pagina. Tali classi verrano aggiunte o rimosse attraverso il Javascript.
Codice jQuery
Eccoci finalmente alla parte più interessante dell’articolo. Per realizzare lo script abbiamo bisogno innanzitutto di nascondere tutto il contenuto del body al caricamento della pagina:
var $_flag = 0;
$('body > *').hide();
$(':root').mousemove(function(){
if($_flag==0) $('body > *').fadeIn('slow');
$_flag = 1;
});
La prima riga contiene una variabile di flag utilizzata per mostrare il contenuto della pagina al movimento del mouse solo quando la pagina viene caricata per la prima volta. Questo consentirà di mantenere nascosto il contenuto quando cliccheremo sul link “Nascondi Contenuto”.
La terza riga contiene il codice necessario a nascondere tutti gli elementi contenuti nel tag body. Il passo successivo consiste nel catturare il movimento del mouse per visualizzare gli elementi al movimento del mouse all’interno della pagina. La pseudo-classe strutturale :root corrisponde a grandi linee al tag <html>. Una volta caricato il contenuto della pagina al movimento del mouse, spostiamo il flag ad 1 in maniera da disattivare l’handler.
Occupiamo ora del link per mostrare e nascondere il contenuto:
$('#toggle a').click(function(){
//se il contenuto è nascosto
if( $('body > *').css('display') == 'none' ) {
$(this).html('Nascondi Contenuto').removeClass('show').addClass('hide');
$('body > *').fadeIn('slow');
} else {
//se il contenuto è visualizzato
$(this).html('Mostra Contenuto').removeClass('hide').addClass('show');
$('body > *:not(#toggle)').fadeOut('slow');
}
});
Il codice precedente non richiede particolari commenti. Non fa altro che verificare lo stato del contenuto. Se è nascosto lo visualizza cambiando l’icona e il testo del link e viceversa.
Il codice jQuery completo è il seguente:
$(function(){
//flag
var $_flag = 0;
$('body > *').hide();
$(':root').mousemove(function(){
if($_flag==0) $('body > *').fadeIn('slow');
$_flag = 1;
});
$('#toggle a').click(function(){
//se il contenuto è nascosto
if( $('body > *').css('display') == 'none' ) {
$(this).html('Nascondi Contenuto').removeClass('show').addClass('hide');
$('body > *').fadeIn('slow');
} else {
$(this).html('Mostra Contenuto').removeClass('hide').addClass('show');
$('body > *:not(#toggle)').fadeOut('slow');
}
});
});
Conclusioni
Il codice che abbiamo visto è molto semplice da realizzare e non comporta problemi per chi non ha Javascript abilitato. E’ possibile scaricare il pacchetto contenente i file oppure visualizzare una demo attraverso i seguenti link:
Demo Download