Chiunque abbia mai provato ad utilizzare nella stessa pagina le due librerie javascript jQuery e Prototype sa bene che esse non riescono a coesistere se non con qualche piccola modifica. Il problema sta nel fatto che entrambe utilizzano la funzione di default “$”. Ecco allora come fare:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
JQ = jQuery.noConflict();
</script>
<script src="prototype.js" type="text/javascript"></script>

Come vedete sarà sufficiente includere le due librerie nell’ordine suddetto e chiamare la funzione jQuery.noConflict() assegnandola alla variabile JQ. Le altre modifiche da effettuare all’interno della pagina che utilizza le funzioni di jQuery sono nella sostituzione della chiamata “$” con la chiamata “JQ”.

In pratica

Chi volesse applicare degli effetti di comparsa e scomparsa di elementi HTML (div) può pensare alla libreria Scriptaculous che offre il metodo toggle della funzione Effect per creare un ingresso a tendina o con apparizione del div che si vuole mostrare o nascondere. L’utilizzo è davvero semplice.

1. Scaricate le librerie Javascript scriptaculous da scriptaculous e prototype.
2. Richiamatele nella pagina dove volete applicare l’effetto:
   <script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
3. Racchiudete l’elemento che volete far sparire e/o comparire in due <div> dando un id univoco al primo:
   <div id="x">
<div>
contenunto
</div>
</div>
4. Aggiungete la chiamata alla funzione sull’evento di un elemento che desiderate, ad esempio sull’evento onclick di un tag <a>
   <a href="#"  onclick="Effect.toggle('x', 'slide', { delay: 0.5 });  return false;">Apri dettagli</a>

Tipi di effetti ed opzioni

Per Effect.toggle è prevista la seguente sintassi:
Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

Ecco alcuni esempi:
Effect.toggle('id_of_element', 'appear');
Effect.toggle('id_of_element', 'slide', { delay: 0.5 });
Effect.toggle('id_of_element', 'blind', { duration: 2.0 });


Riferimenti

Primi passi con scriptaculous: http://wiki.github.com/madrobby/scriptaculous
Esempi: http://wiki.github.com/madrobby/scriptaculous/effect-toggle