Come espandere o nascondere testo formattato o widget con l'effetto Script.aculo.us.

Ho già presentato un trucco per mostrare o nascondere dei widget in un blog su Blogger. Ci si basava esclusivamente sui click del mouse senza aggiungere nessun altro effetto. Con questo post voglio adesso ampliare le possibilità di intervento a un qualsiasi testo formattato inserendo anche un effetto scorrimento. Si utilizza la libreria javascript Prototype & Script.aculo.us che potrebbe essere già presente nel vostro modello in quanto alla base di moltissimi effetti slide. Aprite quindi il vostro template andando su Design > Modifica HTML e cercate questo URL:  www.google.com/jsapi. Se è già presente, si può fare a meno di inserirlo una seconda volta. In caso contrario, cercate la riga </head> e, immediatamente sopra incollate il codice

<!--Prototype e Scriptaculous Inizio-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!--Prototype e Scriptaculous Fine - www.ideepercomputeredinternet.com-->

Salvate il modello. Adesso vediamo in concreto come nascondere e mostrare dei widget o una porzione di testo. Ho pubblicato un post come dimostrazione dell'effetto Slide con Prototype e Script.aculo.us e ho anche postato su Youtube un breve video di presentazione dell'effetto

• Demo dell'effetto slide per nascondere widget e altri elementi -

Effetto Slide per nascondere un widget con Prototype e Script.aculo.us

Dopo aver inserito il file Prototype & Script.aculo.us nel modello, quando si vorrà nascondere una parte di un post, dovremo incollare in Modalità HTML un codice come questo

<div style="margin-left: 20px;">
<a style="color: #940F04; " href="javascript:void(0);" title="Clicca per visualizzare" onclick="new Effect.toggle('elementotesto','slide'); return false">VISUALIZZA TESTO NASCOSTO</a></div>
<div id="elementotesto" style="overflow: visible; text-align: justify; display: none;">
Inserire il codice HTML del testo formattato
</div>

Dove le parti in rosso possono essere personalizzate come si vuole, per la parte in viola può essere scelto un altro nome e occorre inserire il codice dell'oggetto che vogliamo nascondere al posto della scritta evidenziata di blu.

L'anchor text che sarà visto dal navigatore, Visualizza Testo Nascosto, nell'esempio precedente, può essere sostituito da una immagine. In questo caso il codice da inserire in un post sempre in modalità HTML sarà

<div style="margin-left: 30px;">
<a href="javascript:void(0);" onclick="new Effect.toggle('elementoimmagine','slide'); return false" style="color: #940f04;" title="Clicca per visualizzare"></a>
<center><a href="javascript:void(0);" onclick="new Effect.toggle('elementoimmagine','slide'); return false" style="color: #940f04;" title="Clicca per visualizzare"><img src="URL IMMAGINE" /></a></center></div>
<div id="elementoimmagine" style="display: none; overflow: visible; text-align: justify;">
Codice HTML del testo nascosto</div>

Le personalizzazioni sono le stesse del presedente caso che riguardava un semplice link. Le uniche differenze riguardano l'introduzione del tag <center> e </center> per centrare l'immagine e l'URL di quest'ultima che deve essere caricata su un servizio come Picasa, SkyDrive o DropBox.

Se si vuole nascondere un widget bisogna che sia stato caricato con il sistema Design > Aggiungi un gadget > HTML/Javascript. In questo caso si apre andando su Design > Elementi pagina e si inserisce il seguente codice

<div style="margin-left: 20px;"><a style="color: #940f04; " href="javascript:void(0);" title="Clicca per visualizzare" onclick="new Effect.toggle('widgetelement','slide'); return false">MOSTRA WIDGET</a></div>
<div id="widgetelement" style="overflow: visible; text-align: justify; display: none;">
Codice del widget da lasciare inalterato
</div>

In sostanza si incolla una parte iniziale prima del codice del widget evidenziato di blu e poi si inserisce il </div> a chiusura. Anche in questo caso si possono operare delle personalizzazioni come nelle due situazioni precedenti.

Questo metodo può essere utile se si scrivono post piuttosto lunghi suddivisi in sezioni per renderne più facile la lettura. Si possono per esempio visualizzare come anchor text i singoli capitoli che possono essere aperti solo se si decide di leggerli. E' utile anche se si hanno molti widget nella sidebar per visualizzare in dettaglio solo quelli che interessano in quel momento. I più esperti potranno modificare l'evento onclick con onmouseover per mostrare la parte nascosta al passaggio del mouse e non solo a seguito del click.