Anche lo script che presentiamo è una realizzazione di Sharon Paine per Dynamic Web Coding. Consente la realizzazione di un div al cui interno inserire del testo che scorrerà a intervalli regolari e ciclicamente.
Lo script si compone di uno script in formato js da collegare alla pagina, di una sezione JavaScript presente nella sezione <head></head> della pagina, di una serie di regole CSS e di una serie di un richiamo all'interno della parte HTML.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Nell'esempio allegato sono stati commentati in italiano i punti cardine dello script. Qui analizeremo solo gli step necessari all'implementazione.
Per prima cosa si dovrà collegare al documento il file .js esterno 'dw_scroller.js':
<script src="dw_scroller.js" type="text/javascript"></script>
Segue una breve sezione Javascript incorporata:
function initScroller() {
var scr1 = new dw_scroller('cnt', 150, 160, 5, "v", true);
scr1.setTiming(100, 7000);
}
Si tratta della definizione della funzione Javascript principale, 'initScroller'. La variabile scr1 contiene 6 argomenti. Nell'ordine: l'id del div a cui applicare lo scorrimento ('cnt'), larghezza e altezza del div in pixel (150 e 160), il numero di porzioni di testo da far scrorrere (5), la direzione orizzontale o verticale dello scorrimento (v), l'attivazione dello stop del testo con onmouseover (true).
Con l'istruzione ' scr1.setTiming' si imposta invece la velocità di scorrimento.
## 2: LA SEZIONE CSS
Fondamentale è la parte CSS che precede l'inclusione di Javascript. Sono una serie di regole in grado di definire l'aspetto dei div interessati, oltre che del testo e dei link in esso contenuti. Per poter adattare il tutto al layout della nostra pagina è richiesta quindi la conoscenza delle basi della formattazione con i fogli di stile. Anche in questo caso i commenti aiuteranno ad orientarsi nelle sezioni principali.
## 3: LA SEZIONE HTML
Inizia con il richiamo della funzione:
<body onload="initScroller()">
Ora attenzione. La struttura interessata allo script è costituita da 3 div principali annidati:
<div id="bg">
<div id="wn">
<div id="cnt">
-------------
</div>
</div>
</div>
All'interno del div con id 'cnt', trovano posto 5 div con classe 'item'. Il testo che contengono è quello che scorrerà all'interno del div. Il numero 5 deve essere riportato esattamente nella variabile di cui si è parlato qui sopra.
