saltar intro

credit: jwalsh

Este es un simple tip para evitar conflictos entre jQuery con otras librerías javascript.

Cuando utilizas jQuery nórmalmente se suele añadir todo el código dentro de la función:

$(document).ready(function() {
// tus scripts
});

Y se utiliza el comodín “$” como sustituto enriquecido del “getElementById“.

El problema surge cuando después de escribir todo el código necesario te encuentras que debes  añadir otra librería, como script.aculo.us, mootools, o Prototype, y debes sustituir todos los signos “$” por otro diferente.

La manera que hasta ahora utilizaba era colocando dentro del $(document).ready(function(){}); lo siguiente:

var loquesea = jQuery.noConflict();

Y donde antes escribía $("#contenido").fadeIn(); debía poner loquesea("#contenido").fadeIn();

Esto no tendría mayor problema salvo que a veces el código sea muy largo o añadas scripts de terceros que no terminas de controlar del todo.

Pues bien, el remedio es rápido y fácil. Hay que envolver la función $(document).ready(function() {}); entre (function($){ y })(jQuery); quedando el script así:

(function($){
$(document).ready(function() {
// scripts
});
})(jQuery);

Sin olvidar meterlo todo dentro de las etiquetas <script type="text/javascript">...</script>

Extraido del slide JavaScript in Drupal 7: What developers need to know.

No voy a explicar que es un bookmarklet porque entiendo que este blog no es generalista.

Hace un tiempo hice algunas pruebas para crear bookmarklets cargando la librería jQuery para luego ejecutar alguna función aprovechando su versatilidad. Llegué incluso a meter toda la librería en una sola línea javascript. Pero estaba claro que la solución más práctica consistía en cargar la librería y luego ejecutar la función con las acciones.

Aprovechando la aparición de la utilidad online Sunday Morning que traduce textos mediante un marcador que precarga jQuery, he editado su propio script para que sirva a mis propositos.

javascript:void((function(){
// función para cargar archivos javascript
function load(type, src){
var s=document.createElement('script');
s.setAttribute('src',src);
s.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(s);
};

// función que establece un tiempo de espera y luego ejecuta el script que se defina
function whenLoaded(callback){
if(typeof(window['jQuery']) != 'undefined'){
callback();
}else{
setTimeout(function(){whenLoaded(callback)},100);
}};

// se carga la librería jQuery desde las Apis de Google
load('src','http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js');

// se ejecuta el script después de un tiempo prudencial de carga
whenLoaded(function(){
// evitar conflictos con otras librerias, incluida la propia jQuery
var $jqbm = jQuery.noConflict();
// Aquí se pone lo que uno quiera en sintaxis jQuery
$jqbm('img').toggle('slow');
});

})());

Y todo esto en un link, que al pulsarlo alterna entre ocultar y mostrar las imágenes de la web activa.

Ocultar/mostrar imágenes en foto de prueba:

Arrastrando el enlace hasta la barra de marcadores de tu navegador, tendrás siempre a mano esta utilidad en cualquier página que estés viendo.

Modificando el código las posibilidades son muuuuchas.