Usar Scriptaculos y jQuery al mismo tiempo en blogger

Unos de los problema mas comunes de blogger; que le puede pasar a cualquiera, cuando
ya usamos Scriptaculous por x o y razon y de pronto vemos un tutorial donde agregaremos un efecto y tenemos que usar jquery
y bueno al darmos cuenta que no funciona nos desilucionamos.. ami me a pasado.


y te preguntas ¿porque no funciona? si ise todo bien!

La Respuesta...

El problema es de incompatibilidad entre Scriptaculous y jQuery lo que sucede es que ambos usan la misma sintaxis para llamar a las funciones del script, esto hace que ambas
librerías no sepan a quién hacerle caso pues las dos usan la misma forma de leer esas instrucciones.

Sin enbargo hay una solucion para este problema, Grasias a El Protro de Cuidad Blogger podemos solucionar esto, simplemente usando una variable en la sintaxis, esto es para que no entren en conflito ambas librerías y se pueda usar jQuery aun cuando se tenga Scriptaculous, Prototype o Mootools en el blog.

Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
Por ejemplo, un código que use jQuery se vería similar a este:

    <script src="URL del archivo jQuery" type="text/javascript" />
    <script src="URL de algún script que necesita jQuery" type="text/javascript" />

    <script type="text/javascript">
    $(document).ready(function(){
    $("div").hide();
    });
    </script>

Lo que hacemos ahora es agregar antes de las instrucciones del script el comando jQuery.noConflict(); y además cambiaremos todos los $ que encontremos por la palabra jQuery
Por ejemplo:

    <script src="URL del archivo jQuery" type="text/javascript" />
    <script src="URL de algún script que necesita jQuery" type="text/javascript" />
    <script src="" type="text/javascript" />

    <script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){
    jQuery("div").hide();
    });
    </script>

Y habiendo hecho eso jQuery podrá usarse sin problemas aun cuando tengamos otra librería de scripts en el blog.


 Un ejemplo. Veamos cómo sería el código normal del menú deslizante arriba del blog.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function() {

    // Expand Panel
    $(&quot;#open&quot;).click(function(){
    $(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
    });

    // Collapse Panel
    $(&quot;#close&quot;).click(function(){
    $(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
    });

    // Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
    $(&quot;#toggle a&quot;).click(function () {
    $(&quot;#toggle a&quot;).toggle();
    });

    });</script>

Y así sería si aplicamos el truco para que funcione también con Scriptaculous.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    jQuery.noConflict();
    jQuery(document).ready(function() {

    // Expand Panel
    jQuery(&quot;#open&quot;).click(function(){
    jQuery(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
    });

    // Collapse Panel
    jQuery(&quot;#close&quot;).click(function(){
    jQuery(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
    });

    // Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
    jQuery(&quot;#toggle a&quot;).click(function () {
    jQuery(&quot;#toggle a&quot;).toggle();
    });

    });</script>

En resumen, agregamos la función jQuery.noConflict(); y cambiamos todos los $ por jQuery
De esta forma en la gran mayoría de los casos podrás usar jQuery y Scriptaculous al mismo tiempo sin resignarte a elegir uno u otro.