Come inserire messaggi scorrevoli digitati automaticamente all'interno di una textarea.

La textarea è un tag HTML che viene in genere viene utilizzato per mostrare ai lettori un codice da copiare per inserire in un blog per esempio un antipixel. Vediamo come sia possibile creare una textarea animata in cui inserire un numero indefinito di messaggi che si visualizzeranno automaticamente con un effetto che ricorda la digitazione su uno schermo.

Questi messaggi possono essere inseriti in un widget del blog, in un articolo o in una pagina statica. Per metterli in un post si va semplicemente in Modalità HTML o in Origine se si usa Windows Live Writer. Stessa procedura per l'inserimento in una pagina statica. Se si opta per un widget occorre andare su Design > Aggiungi un gadget > HTML/Javascript e incollare questo codice

<script language="JavaScript">
var posizione1=0
var posizione2=0
var ritardo;
var fine;
var Messaggio='Messaggio1. Messaggio2. Messaggio3. Messaggio4.';
function MachineType(delayfunction) {
ritardo = delayfunction;
if (posizione1 > Messaggio.length) {
document.Forma.area.value = '';
posizione1 = 0;
posizione2 = 0;
}
else if (Messaggio.substring(posizione1-2,posizione1-1) == '.') {
document.Forma.area.value = '';
posizione2 = posizione1-1;
posizione1++;
}
else {
document.Forma.area.value = Messaggio.substring(posizione1,posizione2);
posizione1++;
}
fine = setTimeout("MachineType(ritardo) ", delayfunction);
}
</script>
<form name="Forma">
<textarea name="area" style="background: #FFEAE9; border: 3px double #003366; color: #003366; font-size: 18px; height: 85px; width: 600px;"></textarea></form>
<script>
MachineType(120);
</script>

Nel caso del widget si clicca su Salva mentre per il post si pubblica come sempre. Si vedrà una cosa simile a questa

Le personalizzazioni da fare sono le seguenti:

1. Al posto di Messaggio1. Messaggio2. Messaggio3. Messaggio4. inseriamo il testo che vogliamo visualizzare. Dobbiamo ricordarci che un messaggio finisce quando si inserisce un punto che fa da separatore tra una proposizione e l'altra. Non possiamo inserire apostrofi perché sarebbero interpretati come un tag HTML impedendo il funzionamento del widget. Se è assolutamente necessario mettere un apostrofo si può optare per quello inclinato ΄ . Non garantisco però che venga visualizzato correttamente
2. width determina la larghezza del widget (600px)
3. height è l'altezza del widget (85px)
4. color è il colore del testo (#003366)
5. font-size sono le dimensioni dei caratteri (18px)
6. border determina la forma del bordo oltre alle dimensioni e al colore. Consultare il post sullo stile dei bordi.
7. background è il colore di sfondo della textarea (FFEAE9)
8. MachineType(120) determina la velocità dello scorrimento del testo. La textarea non funzionerà se postata con WLW. Lo script dovrà essere incollato nel post attraverso l'Editor di Blogger.

Chi trovasse delle difficoltà a personalizzare il messaggio può provare a incollare questo codice di esempio. Si può usare il tool online HTML Realtime.