Pubblicato il 22/09/11e aggiornato il

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.




10 commenti :

  1. Assolutamente delizioso, credo proprio che troverò il modo di utilizzarlo!

    RispondiElimina
  2. Non riesco a personalizzarlo!
    Vado su Real-time HTML editor, tolgo il testo "Messaggio 1. Messaggio 2 etc...", metto il mio testo (senza apostrofi) ma:
    -O il widget non va (appare solo lo sfondo e il bordo)
    -O fa apparire talmente veloce le scritte (senza che abbia modificato la velocità) da rendere impossibile la lettura.
    Grazie!

    RispondiElimina
  3. @MariaFelicia99
    Prova a incollare questo codice di esempio
    https://docs.google.com/document/pub?id=1jfY5-7dB2JxejAh9mYZi_Lgech0MX_CaNkGaTBLI5FQ
    Al posto delle citazioni di Einstein metti i tuoi messaggi. Ricordati che il punto significa termine del messaggio

    RispondiElimina
  4. @MariaFelicia99
    Non provare a modificare il codice direttamente con RealTime HTML. Modificalo in un file di testo e poi incollalo per vedere se funziona.

    RispondiElimina
  5. Gadget fantastico e semplicissimo da installare!
    Ho visto che rimane un po' troppo spazio vuoto tra la parte inferiore di questo gadget e il gadget subito sotto. Sai se c'è modo di diminuirlo un pochino?

    RispondiElimina
  6. @Dieta e Dintorni
    Come per tutti i widget puoi seguire questo tutorial
    http://www.ideepercomputeredinternet.com/2011/05/come-diminuire-lo-spazio-tra-post-e.html
    Puoi individuare l'ID del widget dandogli un titolo posticcio e poi andare su Modifica HTML per vedere che tipo di ID ha dovrebbe essere HTMLX dove al posto di X c'è un numero, quindi segui le istruzioni del post

    RispondiElimina
  7. Ciao Ernesto
    Articolo molto interessante e utile per personalizzarlo basta l´editore di Windows.
    Sì, in effetti, c’è un po’ di spazio.
    Scusa se ti faccio questa domanda nei text area dove inserisci i codici vedo che in basso a destra c’e la scritta <>Codice by e poi il tuo nome e un copyright lo trovo interessante come faccio, ha farne uno uguale occorre qualche software? Grazie alla prossima

    RispondiElimina
    Risposte
    1. @Ignazio
      Io non sono per nulla bravo nella grafica però puoi seguire questo tutorial
      http://www.ideepercomputeredinternet.com/2010/01/come-creare-degli-stili-personalizzati.html

      Elimina
  8. Ciao Ernesto
    Intanto grazie per la tempestività della risposta dunque ho provato a inserire nel post il primo codice Di questo link Come creare degli stili personalizzati per inserire il codice HTML in un articolo. Come suggerisci la spunta su Mostra HTML Letteralmente non l’ho messa perché´ c´era già, non e successo niente (sarebbe stato fin troppo facile) il riquadro, dove tu inserisci i codici, mi sembrava un text area ma non lo e come tu dici e una citazione ci sono diversi passaggi da fare e purtroppo il tempo che ho a disposizione e poco, ci proverò leggendo tranquillamente le tue istruzioni. Fai il modesto ma sai che non e cosi e proprio lì la tua grandezza ti faro sapere ciao amico e grazie ancora per la tua disponibilità´.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.