Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Select con area di testo collegata

Link copiato negli appunti

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{
;
;
border: 1px solid black;
background-color: #f0f0f0;
display:block;
}
</style>

Con la classe "areatesto" dobbiamo impostare:

;

la lunghezza dell'area testo (in pixel)

;

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.


Ti consigliamo anche