Lo script che presentiamo può essere utile a coloro che vogliano proporre un sistema di domande/risposte sul proprio sito. Ad ogni voce presente nell'elemento select del form sarà collegata un'area sottostante in cui scrivere un testo a piacere.
Il codice è perfettamente compatibile con Explorer 5.x, Netscape 6.x e, cosa importante, non c'è limite alle voci impostabili nella select.
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto inseriamo, tra i tag <head>, i fogli di stile per determinare le caratteristiche dell'area testo:
<style type="text/css">
.areatesto{
width: 300px;
height: 180px;
border: 1px solid black;
background-color: #f0f0f0;
display:block;
}
</style>
Con la classe "areatesto" dobbiamo impostare:
width: 300px;
la lunghezza dell'area testo (in pixel)
height: 180px;
l'altezza dell'area testo (in pixel)
border: 1px solid black;
lo stile del bordo (provare a sostituire "solid" con "dashed" oppure "black" con "red")
background-color: #f0f0f0;
il colore di sfondo dell'area testo
A questo punto inseriamo il codice javascript sempre tra i tag <head> della pagina
Questo codice non va modificato in nessun parametro. Ciò che invece dovremo personalizzare sarà il select che conterrà le domande; infine sarà necessario scrivere le relative risposte.
Inseriamo, nel corpo della pagina, questo codice:
<form name="messaggioform">
<select name="messaggiooption" size="1" onChange="expandone()">
<option selected>Domanda 1</option>
<option>Domanda 2</option>
<option>Domanda 3</option>
<option>Domanda 4</option>
</select>
<div id="messaggio0" class="areatesto">
HTML.it è il primo sito italiano sul Web publishing. Primo per numero di visitatori e iscritti alle mailing, primo in ordine di tempo e primo per materiale proposto. L'accesso ad HTML.it è completamente gratuito e nessuna sezione è preclusa ai visitatori anonimi. Oltre a fornire contenuti editoriali, HTML.it fornisce servizi quali il forum di discussione, i sondaggi, le news ed altri importanti strumenti di aggiornamento.
</div>
<div id="messaggio1" class="areatesto">
HTML.it è un sito indipendente da qualsiasi gruppo editoriale. Appartiene ad HTML.it srl, una società a responsabilità limitata nata proprio per gestire le attività del sito. Amministratore unico di HTML.it srl è anche colui che coordina le attività editoriali del sito: Massimiliano Valente. Dunque dietro HTML.it non c'è nessun "potere forte" ma la stessa struttura che ne cura fin dal 1997 la crescita, soltanto con una forma societaria differente.
</div>
<div id="messaggio2" class="areatesto">
Il network di HTML.it è suddiviso tra 12 server situati presso la webfarm di <a href="http://www.grapes.it/">Grapes</a>. Le macchine più potenti sono riservate per i servizi di webtool e per i siti in php. Questi ultimi, in particolare, girano su un cluster (assemblato da <a href="http://www.hwupgrade.it">HWupgrade.it</a>) composto da un server-database e due server-web che si occupano di smistare gli utenti per bilanciare il carico.
</div>
<div id="messaggio3" class="areatesto">
Attualmente, nella sede di Roma, lavorano 9 persone a tempo pieno. Si occupano della gestione e dell'aggiornamento quotidiano di tutto il network. La redazione, nella produzione di contenuti, è supportata anche da uno staff di oltre 30 collaboratori esterni (che lavorano in telelavoro).
</form>
Vediamo a cosa è importante stare attenti:
<form name="messaggioform">
a meno di cambiare il codice javascript, sarà necessario chiamare con il nome "messaggioform" il form contenente la select con le domande
<select name="messaggiooption" size="1" onChange="expandone()">
il select dovrà chiamarsi "messaggiooption" e dovrà contenere l'istruzione onChange="expandone()"
I testi associati ad ogni domanda sono contenuti all'interno di un DIV così strutturato:
<div id="messaggio0" class="areatesto">
testo testo testo
</div>
L'ID di ogni DIV dovrà avere questo valore:
"messaggioNUMERO"
dove NUMERO è l'indice (a partire da zero) associato alla domanda nel select (0 per la prima, 1 per la seconda, 2 per la terza e così via).
La chiusura del form (</form>) va posizionata dopo l'ultimo DIV inserito.
Per posizionare gli elementi possiamo utilizzare una semplice tabella: nella prima riga inseriremo il select, mentre nella seconda andranno i DIV.
Altre modifiche non sono necessarie.
