Noi crediamo in - fa tutta la differenza del mondo

Insieme è differente

Non è un discorso di talento, di bravura, di essere più intelligenti più pronti o più addormentati.

Nascondere un Div dopo un timeout / settare il timer di un oggetto

E se, dopo aver notificato all'utente l'esito dell'operazione da lui richiesta (aggiornamento, cancellazione, caricamento...), volessimo far scomparire il messaggio dopo un certo tempo?

Ciò può essere utile per recuperare spazio all'interno della pagina e per non appesantire troppo l'applicazione dal punto di vista dell'interazione con l'utente: è giusto avvertire l'utente di ciò che è accaduto, ma non più del tempo necessario. L'utente potrebbe stancarsi di leggere il messaggio di notifica che rimane lì per sempre o per un tempo molto lungo.

Non è difficile ovviare a ciò. Possiamo utilizzare una funzione come la seguente per far scomparire il messaggio

function timer(){   HideContent('fatto'); }

accoppiata con l'evento onload di Javascript inserito nel tag "body" della nostra pagina.

body onload="javascript:ShowContent('fatto');setTimeout('timer()', 5000);"

Ecco un esempio funzionante che permette di far scomparire il div messaggio dopo 5 secondi dal caricamento della pagina. Utilizzare questo piccolissimo trucchetto nel momento opportuno e nelle giuste situazioni, sarà sicuramente un effetto gradito agli occhi dell'utente.

Cos'è un layer web?

Un layer non è altro che uno strato.

Esattamente come questa torta al cacao, così può essere composta una pagina web, ovvero può essere stratificata e composta di più livelli.

Non tutti i livelli sono visibili ed utilizzati subito dall'utente che da fuori ha una visione parziale del contenuto della pagina - esattamente come le tre linee di cioccolato della torta che, se non viene tagliata ed osservata nel suo interno, non se ne conosce la composizione - potrebbe pure contenere marmellata o miele anzichè cioccolata!

All'interno di una pagina web non si perdono informazioni o contenuti bensì, attraverso un utilizzo ponderato ed oculato, si possono ottenere vari stratagemmi per "dialogare" con l'utente ed indirizzarlo verso le operazioni giuste da compiere.

Tecnicamente niente di complesso, il layer si realizza effettivamente utilizzando il tag div del linguaggio HTML che con l'aiuto di qualche linea di Javascript mostra e nasconde gli oggetti all'interno della pagina.

Vantaggi dell’utilizzo dei layer

Utilizzare i layer nel web comporta notevoli ed interessanti vantaggi:

1. l'utente vede solo ciò che deve vedere al momento:

       1.1 possiamo facilmente indirizzarlo a compiere solo quelle operazioni che effettivamente può compiere nel contesto nel quale si trova all'interno dell'applicativo;

        1.2 possiamo dare all'utente l'idea che l'applicazione sia molto veloce: ogni qual volta egli clicca su qualche voce di menu, l'operazione da lui richiesta è istantanea;

2. ci sono molteplicità di situazioni e obiettivi in cui possono essere impiegati:

       2.1 nei menu per far comparire/scomparire vari sotto-menu;

       2.2 per far comparire/scomparire informazioni e parti intere della pagina;

       2.3 per dare messaggi all'utente dopo aver compiuto certe operazioni;

       2.4 per informare l'utente dello stato del caricamento delle pagine o di alcune funzionalità

       2.5 per quanto altro vi possa venire in mente...

3. se utilizzati bene, possono rendere l'applicativo elegante e allo stesso tempo molto funzionale, navigabile e molto gradevole per l'utente;

4. l'implementazione è banale.

Dunque poco dispendio di inutili energie per il programmatore e ottimi effetti per l'utente che utilizza l'applicativo. Provare per credere.

Mostra / nascondi Div (layer)

Ecco alcune semplici ma utilissime funzioni javascript utilizzate nei post sul messaggio di "caricamento in corso" ed in quello sui messaggi di notifica per l'utente:

1. funzione HideContent(d) che nasconde il div passato in input

function HideContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "none"; }

2. funzione ShowContent(d) che mostra il div passato in input

function ShowContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "block"; }

3. funzione ReverseContentDisplay(d) che inverte lo stato del div rendendolo visibile se non lo era o nascondendolo se veniva mostrato all'utente

function ReverseContentDisplay(d) {   if(d.length < 1) { return; }   if(document.getElementById(d).style.display == "none") {     document.getElementById(d).style.display = "block";   }   else { document.getElementById(d).style.display = "none"; } }

Ecco un esempio pratico riassuntivo (↗) che mostra in azione queste funzioni.