Scritte nella statusbar


Come vi ho già detto, i messaggi sulla status bar non sono una delle cose che preferisco di più per due motivi: il primo è che così non si vedono (quasi mai) gli indirizzi dei link che si vanno a seguire (infatti queste scritte li "sovrascrivono") e in secondo luogo creano strani effetti collaterali; mi spiego meglio: i messaggi che appaiono lettera per lettera hanno un "refresh" dato dal metodo setTimeout() oppure da setInterval() e quindi inevitabilmente "sfarfallano" dando fastidio e distraendo dai contenuti dalla pagina stessa.
Comunque per farvi vedere che queste cose esistono e sono fattibili, ecco degli esempi di queste scritte.
Inizierò con un esempio di quelli meno fastidiosi, dove viene mostrata una intera frase per volta, che viene cambiata ogni cinque secondi (e quindi non troppo fastidiosa):

<script language="javascript">

var scritte = new Array("The shiny side of the moon",
"@ http\:\/\/web\.tiscalinet\.it\/alexmfm",
"javascript\, umorismo\, news e molto altro\.\.\.",
"vistalo spesso perche\' viene aggiornato frequentemente",
"Visita anche http\:\/\/web\.tiscalinet\.it\/sitodelgianna, il sito del Gianna",
"troverai al suo interno cose molto interessanti");

function cambio_scritta()
{
var oggi = new Date();
var sec = oggi.getSeconds();
var intervallo;

if ( ((sec>=0)&&(sec<5)) || ((sec>=30)&&(sec<35)) )
window.status= scritte[0];
else if ( ((sec>=5)&&(sec<10)) || ((sec>=35)&&(sec<40)) )
window.status= scritte[1];
else if ( ((sec>=10)&&(sec<15)) || ((sec>=40)&&(sec<45)) )
window.status= scritte[2];
else if ( ((sec>=15)&&(sec<20)) || ((sec>=45)&&(sec<50)) )
window.status= scritte[3];
else if ( ((sec>=20)&&(sec<25)) || ((sec>=50)&&(sec<55)) )
window.status= scritte[4];
else if ( ((sec>=25)&&(sec<30)) || ((sec>=55)&&(sec<=59)) )
window.status= scritte[5];
}

function gestione_scritta()
{
var intervallo;

if(event.srcElement==form1.elements[0])
{
cambio_scritta();
intervallo = setTimeout("cambio_scritta()", 1000);
}
if(event.srcElement==form1.elements[1])
{
window.status = "";
clearTimeout(intervallo);
}


}
</script>

<form name="form1"> <input type="button" name="inizio" value="inizia" onclick="gestione_scritta();"> <input type="button" name="termina" value="fine" onclick="gestione_scritta(); "> </form>
Ecco quello che succede nel codice:
Per prima cosa creiamo un array che contiene le scritte che dovranno essere visualizzate nella status bar (attenzione che la numerazione degli elementi in un array inizia da zero!)
Subito dopo c'è la funzione vera e propria per cambiare le scritte:
si crea un oggetto
Date
e una variabile sec che contiene i secondi dell'oggetto Date di cui sopra. Queste variabili devono stare qui e non fuori della funzione perché è questa funzione che viene fatta ripetere tramite setTimeout(). Se fossero fuori della funzione, sarebbero prese una volta sola al caricamento della pagina e non si modificherebbero ogni volta che viene richiamata la funzione.
In seguito si fanno i confronti con una serie di if e else if. Dato che le sei frasi cambiano ogni 5 secondi, bisogna fare due cicli al minuto facendo apparire ogni frase nei due intervalli x<=sec<(x+5) e (x+30)<=sec<(x+35), con x che va da 0 a 30.
Nota bene: in questo modo le scritte non partono necassariamente dalla prima! Se al primo passaggio sec vale 27, verrà mostrata la quinta frase (numero 4 dell'array).

Subito dopo viene definita la funzione che gestisce i clic sui bottoni (questo se volete dare la possibilità al visitatore di iniziare e terminare a proprio piacere la funzione tramite bottoni).
Si crea una variabile chiamata intervallo ma non si inizializza perché ci penseremo quando cliccheremo sui pulsanti. Questa funzione infatti viene richiamata dai pulsanti nel loro metodo onclick.
Tramite un controllo con if si cerca la sorgente dell'evento generato con event.srcElement.
Attenzione: srcElement viene riconosciuto solo da Internet Explorer. Per Navigator bisogna usare target (inutile dire che target non funziona su Explorer).
Al limite se volete fare uno script cross-browser (ovvero sia per Explorer che per Navigator) potete mettere un controllo al'inizio della funzione, del tipo
if (navigator.appName== nome_del_browser)
{ codice per il navigatore identificato da nome_del_browser}
else
{codice per l'altro navigatore}

Tornando al nostro codice, se è stato cliccato il pulsante "Via", identificato da form1.elements[0] (poteva anche essere
form1.inizio) si fa partire la funzione combio_scritta() e si imposta setTimeout() per fare un aggiornamento al secondo (questo è soggettivo, può essere un intervallo qualsiasi compreso tra uno e cinque secondi anche tipo 3479 millisecondi :-D ).
Se invece l'elemento che genera l'evento è form1.elements[1] (oppure form1.termina), si fa scrivere la stringa vuota sulla statusbar (questo cancella l'ultima scritta visualizzata) e si fa il clearTimeout() della funzione.
Nota bene: ho provato con setInterval() e clearInterval() ma, attenti, non funziona; la funzione parte con il pulsante "Via", ma non si ferma con "Termina"!

Fuori dallo script c'è il form (che deve avere l'attributo name="form1" altrimenti lo script non funziona perché fa riferimento esplicitamente ad esso (e lo stesso accade per i bottoni).
I due bottoni richiamano entrambi la funzione gestione_scritta(), a cui spetta il compito, come già visto, di stabilire quale pulsante è stato premuto e così eseguire il codice relativo all'evento.



Mentre scrivevo il commento al codice mi veniva in mente che se non si voleve fare il ciclo doppio ogni trenta secondi, si poteva fare anche in questa maniera. Prendere sempre come base i secondi, ma utilizzare una variabile che contenga il resto della divisione dei secondi per sei (nuova_var=oggi.getSeconds()%6), e fare aggiornare la funzione, tramite il setTimeout(), ogni sette secondi, in modo da avere le frasi sempre incrementate di uno e rispettare l'ordine dell'array.
Come avete visto ci sono molti modi per riuscire a fare una stessa cosa, basta avere un po' di fantasia (e ingegno) e il resto viene quasi da sé.

Oltre a quelle che avete appena visto, ci sono anche le scritte che scorrono un carattere alla volta. Io non le gradisco troppo e l'esempio che vi riporto sotto è stato preso da Internet. Dato che è molto tempo che ho questo script, non ricordo più il sito da cui è stato preso, né ci sono indicazioni sull'autore.
<Script languge="javascript">
var i = 0;
var TextNumber = 0;
var TextInput = new Object();
var HelpText="";
var Text = "";
var Speed=300
var WaitSpace=" "
TextInput[0] = "Ecco un esempio";
TextInput[1] = "di testo che socorre";
TextInput[2] = "un carattere alla volta";
TextInput[3] = "tramite questa funzione";
TextInput[4] = "che agisce su ogni lettera";
TotalTextInput = 4; // (0, 1, 2, 3, 4)
for (var addWait = 0; addWait <= TotalTextInput; addWait++)
{
TextInput[addWait]+=WaitSpace;
}
var TimerId
var TimerSet=false;
function startBanner (form)
{
if (!TimerSet)
{
TimerSet=true;
banner();
}
}
function banner()
{
Text=rollMessage();
TimerId = setTimeout("banner()", Speed);
window.status=Text;
}
function rollMessage ()
{
Wait_yn=false;
i++;
var CheckSpace = HelpText.substring(i-1, i);
CheckSpace = "" + CheckSpace;
if (CheckSpace == " ")
{
i++;
}
if (i >= HelpText.length+1)
{
i=0;
if (TextNumber < TotalTextInput)
{
TextNumber++;
}
else
{
TextNumber = 0;
}
initBanner();
}
Text = HelpText.substring(0, i);
return (Text);
}
function initBanner()
{
Text = TextInput[TextNumber];
HelpText = Text;
startBanner ();
}

</Script>