Pubblicato il 13/02/11 - aggiornato il  | 42 commenti :

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

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.





42 commenti :

  1. Grande Parsi!
    Vedi che faccio bene a chiamarti maestro??? o preferisci vate??? hehehe

    RispondiElimina
  2. Fenomenale!!! Ma ho una domandona: come faccio ad inserire il testo? E, soprattutto, dove lo devo inserire? In un nuovo widget HTML?

    RispondiElimina
  3. @Alessio
    @Via Vai
    Grazie

    @Giorgiogal
    Mi sembrava troppo Maestro, figurati Vate ^_^ Non vorrei diventare un novello D'Annunzio ahahah

    @Benzene
    Puoi usare questo tool per nascondere un widget o una porzione di testo di un post. Mi sembra di capire che è questa l'ipotesi che ti interessa. Quando scrivi un post lo editi con la visualizzazione normale e puoi inserire immagini, link, salti di riga, paragrafi, grassetto, ecc. Andando in Modalità HTML vedrai quello che si chiama il codice. Dopo aver scritto il testo da nascondere con tutte le cose che vuoi metterci, ne copi il codice HTML e lo incolli al posto di "Inserire il codice HTML del testo formattato".

    RispondiElimina
  4. Tutto chiaro. Grazie infinite!

    RispondiElimina
  5. Non ho trovato il modo per ingrandire il testo con un click (quello che si trova nei siti con le A nei vari formati). Hai scritto qualcosa su questo? Grazie e ciao.

    RispondiElimina
  6. @Stefano
    No, no mi ricordo nulla del genere. In futuro chissà potrei pensarci...

    RispondiElimina
  7. Ciao, quando inserisco la parte di codice che va nel modello non mi funziona più l'anteprima dei Recent post. Hai un'idea del perchè?

    RispondiElimina
  8. per essere più precisi con Fiferox e google chrome mentre con explorer funziona tutto correttamente

    RispondiElimina
  9. @Nerio
    Sono note alcune incompatibilità di Prototype e Scriptaculous con gli script basati su JQuery. Nel tuo caso sembra si manifestino solo per alcuni browser.

    RispondiElimina
  10. eccomi di nuovo (sarò diventato il tuo incubo) :D:D

    vorrei chiederti una cosa riguardo articolo: mi chiedevo se ci fosse il modo per mostrare il wdget nascosto verso l'alto e non verso il basso...qualche modifica da fare a questo codice o un altro metodo...grazie!

    RispondiElimina
  11. Non lo so. Si nasconde verso il basso perché questo è il naturale flusso del testo non per scelta.

    RispondiElimina
  12. Grazie lo stesso!! sempre preciso, puntuale e gentile nelle risposte!...cercherò altre soluzioni.. :D

    RispondiElimina
  13. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  14. ecco cercavo una cosa del genere con effetto slide per un menu che si srotola lentamente... ma nel tuo blog di prova non funziona più?

    RispondiElimina
  15. ora mi funziona... pur avendo la stringa di codice nel template ho dovuto rimettere di nuovo il codice, grazie mille, bel regalo di Natale, lo cercavo da tanto, kiss

    RispondiElimina
  16. @Soffio di Dea
    Avevi già trovato il post giusto quindi lascia perdere il mio precedente commento. Nel post di prova non funziona più perché non faccio altro che mettere nuovi script e qualcosa si perde ;)

    RispondiElimina
  17. comunque grazie mille, mi sono scervellata su come realizzare quel menu e nn avevo trovato nulla di simile :) spero di mostrarti tutto presto, un bacio e auguri

    RispondiElimina
  18. @Soffio di Dea
    Auguri anche a te (non so se il bacio sarebbe gradito ahahahah)

    RispondiElimina
  19. ciao sono riuscito a inserire l immagine solo che quando clicco sopra non succede nulla

    RispondiElimina
  20. @boston blog
    Può darsi che il tuo modello non sia compatibile con Sciptaculous oppure che tu abbia sbagliato qualcosa.

    RispondiElimina
  21. ciao ho provato con un altro tuo articolo molto simile Come nascondere testo, video, immagini o altro all'interno di un articolo. e adesso funziona :) grazie sei un grande

    RispondiElimina
  22. grazie, sei un grande, chiaro e preciso

    RispondiElimina
    Risposte
    1. @PaoloPascucci
      Grazie, sei molto gentile :)

      Elimina
  23. Risposte
    1. @PaoloPascucci
      Se metti il codice del blockquote al posto di Codice HTML del testo nascosto non vedo ragioni perché non dovrebbe funzionare

      Elimina
  24. Ciao Ernesto,

    torno a romperti le scatole ancora una volta, ma su un altro argomento.

    Ho seguito ogni tuo passaggio (anche inserendo il codice Scriptaculous prima della chiusura dell' head) ma il risultato è che appare solo il link che ha l'anchor text "VISUALIZZA TESTO", ma cliccando non succede nulla.

    Non riesco a trovarne il motivo ed il template dovrebbe supportare l'effetto dato che molti elementi funzionano con scorrimento, a cominciare dalla slideshow iniziale.

    Ti rilascio un'altra volta il link: blog.abruzzoupndown.com

    Grazie in anticipo per il tuo ennesimo aiuto.

    Gianluca

    RispondiElimina
    Risposte
    1. Mi sa allora che mi tocca abbandonare l'impresa...
      Ho visto però un tuo post su come nascondere il testo nei post: proverò con quel metodo.

      Una curiosità, però: sai mica se sia possibile avere anche su blogger una tabella come quella che ho trovato su questa pagina: http://www.wolftour.it/room/sulle-tracce-del-lupo, in modo tale che quando uno clicca su un link appare un nuovo testo all'interno dello stesso articolo (sostituendosi al testo precedente)?

      Grazie della disponibilità Ernesto.

      Gianluca

      Elimina
    2. @# Si tratta di un sito pubblicato con un CMS fatto appositamente

      Elimina
    3. Il sito sì, ma intendevo la possibilità di creare quel tipo di tabella con testo nascosto che appare soltanto nel momento in cui ci si clicca e scompare quando si clicca un altro link.

      Per intenderci: nella fattispecie, se si clicca su "scheda viaggio" scompare il testo di "Programma" e così via. E' possibile realizzarlo anche su blogger, magari con il codice che tu proponi nel tuo articolo http://www.ideepercomputeredinternet.com/2011/04/come-nascondere-testo-video-immagini-o.html?

      Gianluca

      Elimina
    4. @# Forse intendi dividere il testo in varie schede. E' possibile farlo con il widget ma è molto complicato con il post. Credo che nessuno si sia mai cimentato
      http://www.ideepercomputeredinternet.com/2011/05/dividere-la-sidebar-in-schede-per.html
      http://www.ideepercomputeredinternet.com/2011/03/come-dividere-una-sidebar-di-blogger-in.html

      Elimina
  25. Ciao Ernesto,

    complimenti per la tempestività!7
    Sì, è proprio ciò che intendevo!

    In realtà ho provato a seguire il procedimento del primo articolo che mi hai segnalato ed ho inserito il codice che andrebbe nel widget html all'interno del post e funziona. O meglio: funziona soltanto nel mio blog di prova (http://aragnotrekking.blogspot.it, il primo articolo che compare).

    Il problema è che quel codice non va sul blog principale su cui vorei caricarlo (http://blog.abruzzoupndown.com/) e non va né nel post, né come widget.

    Hai qualche suggerimento sul motivo di questa differenza di funzionamento?

    Gianluca

    RispondiElimina
    Risposte
    1. @# Mi pare che tu abbia un dominio personalizzato con sottodominio quindi il javascript su Google Sites non funziona. Deve essere caricato su Dropbox.

      Elimina
    2. Sì, è un dominio personalizzato, ma non l'ho acquistato da Google. Lo spazio web ed il dominio sono su websolutions.it. In questo caso, sai mica dove inserire il javascript? Mi ci sto impiccando...

      Grazie ancora Ernesto!

      Gianluca

      Elimina
    3. @# Il javascript lo puoi caricare sulla cartella Public di Dropbox
      http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html
      Se non sei ancora registrato dovrai crearti la cartella Public da solo
      http://www.ideepercomputeredinternet.com/2012/06/sui-nuovi-account-dropbox-non-ci.html

      Elimina
  26. Ciao Ernesto, scusa per il ritardo nel risponderti.
    Quindi, copio il codice javascript su un file blocknotes, lo carico su dropbox (cartella public), ma poi come faccio a richiamarlo nel blog? Nel senso, come faccio a creare il legame tra il javascript che è caricato su dropbox e ciò che deve apparire sul blog?

    Grazie dell'aiuto.

    Gianluca

    RispondiElimina
    Risposte
    1. @# Non lo devi copiare sul Blocco Note ma devi usare Notepad++
      http://www.ideepercomputeredinternet.com/2011/02/notepad-strumento-indispensabile-per.html
      poi lo devi salvare con estensione .js e caricarlo su Public di Dropbox. Quindi vai su Copy Public link e l'URL lo sostituisci nel codice

      Elimina
    2. Ho seguito i tuoi passaggi.
      Quindi:
      1- ho creato un file js con Notepad++ con il codice javascript che si trova su questo tuo articolo: http://www.ideepercomputeredinternet.com/2011/05/dividere-la-sidebar-in-schede-per.html

      2- Ho caricato il file js su cartella Public di DropBox e ne ho ottenuto il Public Link

      Poi ho proceduto in questo modo:
      1- Ho copiato il codice javascript dell'articolo citato, ho cambiato il link presente nel codice (in src="#") con il public link di DropBox;

      2- Ho incollato il codice così modificato sopra /head del mio template

      3- Ho copiato il 2° codice presente nel tuo articolo (quello in html introdotto da div class=, per intenderci) e l'ho incollato nel mio post.

      Ma non succede niente :-(
      Dove sbaglio...?

      Gianluca

      Elimina
    3. @# Hai fatto tutto bene. Se non ti funziona non ne conosco la ragione ...

      Elimina
    4. Ciao Ernesto!
      Scusami per il ritardo, ma non ho potuto scriverti prima.

      Volevo informarti che ce l'ho fatta! Il procedimento era giusto, come mi avevi consigliato. Non so perché, ma la prima volta che l'ho provato non funzionava.

      Ora sappiamo che si possono creare schede anche nei post!

      Grazie ancora, sei stato gentilissimo.

      Nel frattempo, mi sto impiccando con un altro problema che riguarda lo shadowbox. Ma prima di romperti ulteriormente le scatole, cercherò di risolverlo da me.

      A presto.

      Gianluca

      Elimina

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.