10 snippets de jQuery para un desarrollo web eficiente

A lo largo de los años, jQuery se ha convertido en la librería de JavaScript más utilizada, de calle. En este artículo, te mostramos 10 snippets de jQuery muy útiles que todo desarrollador web debería guardar en alguna parte de su documento de snippets preciados y más usados.

Detectar Internet Explorer

Cuando se trata de diseñar en CSS, Internet Explorer siempre ha sido un problema para desarrolladores y diseñadores. A pesar de que la edad oscura de IE6 se ha ido y que IE es cada vez menos popular, sigue siendo buena idea poder detectarlo fácilmente. Por supuesto, este snippet puedes utilizarlo también para detectar otros navegadores.

$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('Soy un señor mayor que sigue utilizando Internet Explorer');
      }
});

Desplazamiento al inicio de la página

Este es uno de los efectos de jQuery más utilizados hoy en día: mediante un clic en un enlace, la página se desplaza automáticamente hacia la parte superior. Como ves, nada fuera de lo común, pero como desarrolladores no está de más reutilizar código y para ello puedes echar mano de este snippet.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Fijar en la parte superior

Un práctico snippet de jQuery que permite que un elemento se mantenga fijo en la parte superior. Super útil para menús de navegación, barras de herramientas o mensajes importantes.

$(function(){
	var $win = $(window)
	var $nav = $('.mytoolbar');
	var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
	var isFixed=0;
 
	processScroll()
	$win.on('scroll', processScroll)
 
	function processScroll() {
	var i, scrollTop = $win.scrollTop()
 
	if (scrollTop >= navTop && !isFixed) { 
		isFixed = 1
		$nav.addClass('subnav-fixed')
	} else if (scrollTop <= navTop && isFixed) {
		isFixed = 0
 		$nav.removeClass('subnav-fixed')
	}
}

Sustituir una etiqueta HTML por otra

jQuery hace que sea muy sencillo reemplazar una etiqueta html por otra. Como puedes ver, las posibilidades son infinitas...

$('li').replaceWith(function(){
  return $("div").append($(this).contents());
});

Detectar el ancho del viewport

Ahora que los dispositivos móviles son más populares que los ordenadores antiguos, es super útil el poder detectar fácilmente ventanas más pequeñas. Afortunadamente, es sencillo hacerlo con jQuery.

var responsive_viewport = $(window).width();

/* si es menos que 481px */
if (responsive_viewport < 481) {
    alert('El viewport es mas pequeño que 481px.');
} /* fin de viewports pequeños */

Reparar automáticamente imágenes rotas

Si cuentas con un sitio grande que ha estado online por lo menos un par de años, es casi seguro que tengas imágenes rotas en alguna parte de la web. Esta útil función detecta imágenes rotas y las sustituye por una imagen de tu elección, advirtiendo a los visitantes sobre el problema.

$('img').error(function(){
	$(this).attr('src', 'img/img-por-defecto.png');
});

Detectar el copiar, pegar

Utilizando jQuery, es súper sencillo detectar el copiar, pegar y los comportamientos de corte sobre un elemento de tu elección.

$("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});

Target blank automático en enlaces externos

Cuando enlazamos con un sitio externo, es posible que desees utilizar el atributo target = "blank" con el fin de abrir ese sitio en una nueva pestaña. El problema es que el atributo target="blank" no es válido en W3C. ¿Pues qué podemos hacer? ¡jQuery al rescate! Este pequeño snippet detectará si el enlace es externo, y si es así, automáticamente, añadirá el atributo target="blank" al enlace.

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

Fade IN/OUT al pasar por encima con el ratón

Otro snippet "clásico" que debes tener sí o sí en tu caja de herramientas, ya que lo tendrás que poner en práctica de vez en cuando.

$(document).ready(function(){
    $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

    $(".thumbs img").hover(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
    });
});

Desactivar el espacio en input text/password

Los espacios no son necesarios en muchos de los campos de un formulario, como el correo electrónico, nombre de usuario, contraseña, etc. He aquí un truco muy simple para desactivar los espacios en los inputs que tú quieras.

$('input.nospace').keydown(function(e) {
	if (e.keyCode == 32) {
		return false;
	}
});