.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Come promesso una settimana fa, questo script si basa per la maggior parte sul precedente, lo scroller per testo.
      In questo caso però non avremo dei link per muovere i testi perché il funzionamento è del tutto automatico.

      C'è da fare una premessa: questo script è molto difficile da personalizzare (lo vedremo fra un poo) consiglio a chi non è abbastanza esperto di JavaScript o comunque di programmazione in generale di non modificare l'altezza del carattere (tranne l'unica alternativa che ho provato di cui scrivo più sotto) né la variabile Step né l'altezza del livello.

      Gran parte del codice lo abbiamo già visto nello script precedente, in particolare le variabili globali ed il contenuto della funzione Start() che scatta al caricamento della pagina ( solito onLoad() nel <BODY>).
      Quel che c'è di differente, è che adesso all'uscita della funzione Start() abbiamo un setTimeout() (v. tutorial per saperne di più) che eseguirà la funzione Move() due secondi dopo il caricamento della pagina, in modo da consentire la lettura della prima news.

      Ok, forse è il momento di vedere un po' di codice:

<SCRIPT>
<!--
// ---- Sezione personalizzabile (v. scheda nel sito: http://www.jsdir.com/staffscripts/script063.asp)
var AltezzaLinee=24;
var Velocita = 10;
var Intervallo = 2000
var Step=2;
// ---- Fine sezione personalizzabile

[ ... ]

function Start()
   {
   [ ... ]
   setTimeout("Move()",Intervallo);
   }

function Move(where)
   {
   pos=texTop+3
   LayText.top=-pos+DeltaTop;
   if (nn)
      {
      LayText.clip.top=pos;
      LayText.clip.bottom=eval(pos+AltezzaLivello);
      }
      else
      LayText.clip = "rect(" + pos + ", " + LarghezzaLivello + ", " +eval(pos+AltezzaLivello) + ", 0)";
   texTop>=Limite?texTop=0:texTop+=Step;
   if (texTop % AltezzaLinee != 0 )
      setTimeout("Move()",Velocita);
   else
      setTimeout("Move()",Intervallo);
   if (texTop==Limite)
         texTop=0;
   }
//-->
</SCRIPT>
<STYLE TYPE="text/css">
.testo {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;color:000000;}
</STYLE>
</HEAD>
<BODY onLoad="Start()">
. . .
. . .

Ho tralasciato alcuni pezzi che sono praticamente identici allo script precedente
      Quel che ci interessa sono appunto le variabili di personalizzazione e la funzione Move().
      La prima variabile (AltezzaLinee) è la variabile più importante, perché consente alla funzione Move() che effettua lo scrolling di sapere quando ha finito il ciclo che nel mio caso ho impostato a 2 linee.
      Velocità è appunto la velocità di scrolling. 10 è un valore accettabile, valori minori non sono apprezzabili, e valori più alti potrebbero essere tropo lenti.
      Intervallo invece l'intervallo di tempo che intercorre fra 2 scrolling successivi, cioè il tempo per cui una news resta ferma e visibile.
      Step infine è il numero di pixel scrollati ad ogni movimento.

      Veniamo al difficile: l'uso di questo script è abbastanza complicato come vi accennavo prima; a differenza di altri scroller che trovate in rete (in JAVA per lo più) e che si basano sullo scorrimento di un'immagine, qui ho preferito far scrollare un testo inserito in un livello come semplice codice HTML perché di più facile aggiornamento e più comodo per il visitatore dato il caricamento molto veloce.
      Il rovescio della medaglia è che non sono riuscito a trovare una procedura per conoscere esattamente il numero di pixel che una riga di testo occupa in verticale.

      I valori coinvolti in questo discorso sono:
       - l'altezza del testo definito nello stile;
       - il numero di pixel scrollati ad ogni ciclo (variabile "step");
       - la variabile AltezzaLinee;
       - il tipo di carattere del testo;
       - l'altezza del livello ed il suo clipping verticale.

      Insomma c'è di che perderci del tempo, io ho usato solo il Verdana come carattere e due righe di testo e posso dirvi, per averlo provato, che per un font-size di 10 pixel potete usare lo script, il livello e lo stile così come li ho impostati per lo script di prova.
      Se invece volete usare un carattere più grande (verdana 12px come il testo che state leggendo) sarà sufficiente usare il numero 28 dove adesso compare il 24, e cioè nella variabile personalizzabile e nei valori di altezza del livello. Questa è la personalizzazione che di cui vi accennavo all'inizio: l'unica che ho provato e che vi consiglio... pena un bel mal di testa :-)
      Altri caratteri ed altezze non li ho provati, quindi lascio a voi, ma attenzione che potrebbe aggiungersi a quell'elenco di "valori coinvolti" anche il numero 3 che nel codice riportato in questa pagina vedete evidenziato in verde grassetto. Per inciso: quei 3 pixel aggiunti servono solo per spostare il testo un po' più su e riempire bene il layer durante lo scrolling, se aumentate o diminuite l'altezza del carattere provate anche a modificare questo valore (di 1 o 2 ogni 3 o 4 pixel in più aggiunti al font-size).
      Ovviamente tutto questo discorso sul "difficile di questo script" vale per 2 linee di testo... se ne volete 3 o una sola... beh lascio a voi... è tutto da sperimentare :-)).

      Passiamo ad altro: la funzione Move().
      È presto detta: la prima parte è identica allo script già visto, questa volta però il controllo al valore Limite (per vedere se è scrollato tutto il livello) l'ho spostato dopo l'aggiornamento del layer per essere certo che non ci siano scatti nello scorrimento.
      Anche qui la variabile texTop viene incrementata finché non raggiunge il massimo valore, poi viene reinizializzato a zero.
      La riga successiva realizza lo scorrimento: la funzione imposta un setTimeout() (il primo se la if () è vera) per rieseguire subito se stessa se il livello non ha finito di scrollare 2 linee, altrimenti il setTimeout() successivo (quello dell'else) se ha finito di scrollare una notizia e lascia il tempo di leggerla.
      L'ultimo else if() controlla se il layer è scrollato esattamente della sua altezza ed in tal caso reimposta a zero la variabile texTop. Può sembrare ridondante, ma serve per non far permanere per 2 cicli la prima notizia.

      Per realizzare infatti un movimento dall'ultima notizia alla prima (cioè dare continuità fra quando il ciclo di scorrimento finisce e ricomincia) vedrete nel sorgente che la prima riga di testo è stata replicata pari pari nell'ultima, in queto modo l'ultima notizia (la penultima del livello) sfuma sulla prima notizia (l'ultima del livello), quando il ciclo ricomincia la posizione del livello viene resettata e pur se visivamente continua a comparire la prima notizia, in realtà l'ultima riga del livello viene istantaneamente sostituita dalla prima che poi sfumerà nella seconda: ecco così realizzato uno scrolling circolare "vero" in cui c'è continuità di movimento per tutte le righe (nel nosto caso gruppi di 2 righe).

      Basta così: mi è rimasto solo da dirvi di fare attenzione a calibrare la larghezza del livello che contiene i testi da scrollare, preferendo lasciarlo più largo del necessario piuttosto che rischiare che qualche linea vada a capo e durante il tempo di "visione" siano presenti la seconda riga della news precedente e la prima riga dell'attuale.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!