10 snippets de jQuery con los que evitarás más de un apuro

jQuery es, definitivamente, una gran herramienta a la hora de trabajar en un desarrollo front-end. En este artículo, comparto con todos vosotros unos cuantos snippets de jQuery muy, pero que muy útiles, que suelo utilizar casi a diario.

Scroll suave hacia un #anchor

En el pie de tu sitio web, es muy útil proporcionar a tus visitantes un método para que puedan hacer scroll hacia la parte superior de la página. Aquí tienes una vía simple para hacer scroll hacia un #anchor de tu elección.

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>


$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});

Redimensionamiento de imágenes utilizando jQuery

Aunque recomiendo siempre redimensionar tus imágenes en el lado del servidor (utilizando PHP y la librería GD, por ejemplo), puede resultar útil poder cambiar el tamaño de tus imágenes con jQuery. Aquí tienes un práctico snippet para llevarlo a cabo.

$(window).bind("load", function() {
	// IMAGE RESIZE
	$('#product_cat_list img').each(function() {
		var maxWidth = 120;
		var maxHeight = 120;
		var ratio = 0;
		var width = $(this).width();
		var height = $(this).height();
	
		if(width > maxWidth){
			ratio = maxWidth / width;
			$(this).css("width", maxWidth);
			$(this).css("height", height * ratio);
			height = height * ratio;
		}
		var width = $(this).width();
		var height = $(this).height();
		if(height > maxHeight){
			ratio = maxHeight / height;
			$(this).css("height", maxHeight);
			$(this).css("width", width * ratio);
			width = width * ratio;
		}
	});
	//$("#contentpage img").show();
	// IMAGE RESIZE
});

Cargar contenido al hacer scroll automáticamente

Ciertos sitios webs como Twitter, cargan su contenido al hacer scroll. Lo que significa que todo el contenido se carga dinámicamente en una sola página tan larga como seas capaz de hacer scroll.

Aquí tienes como replicar este efecto en tu sitio web.

var loading = false;
$(window).scroll(function(){
	if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
		if(loading == false){
			loading = true;
			$('#loadingbar').css("display","block");
			$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
				$('body').append(loaded);
				$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
				$('#loadingbar').css("display","none");
				loading = false;
			});
		}
	}
});

$(document).ready(function() {
	$('#loaded_max').val(50);
});

Comprobar la seguridad de una contraseña

A la hora de desarrollar un formulario, es muy buena idea proporcionar verificaciones en el front-end primero para que el usuario no envíe a nuestro backend datos incorrectos o erróneos, que después tengamos que corregirlos en el propio backend. Este snippet utiliza expresiones regulares para comprobar si una contraseña es lo suficientemente segura. Con esto no queremos decir que no valides tus formularios del lado del servidor. Es más, lo óptimo es validar los datos en los dos lados.

$('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Igualar las alturas de elementos div

Igualar las alturas de elementos div no es posible (o no es muy sencillo) hacerlo con CSS puro, por lo que jQuery puede ayudarte. El código de abajo automáticamente ajustará las alturas de los elementos div de acuerdo al div más alto.

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

Parsear JSON con jQuery

Parsear datos JSON con jQuery no es complicado del todo. Aquí tienes un ejemplo eficiente de como parsear datos JSON, el cual puedes utilizar en tu propio proyecto web.

function parseJson(){
	//Start by calling the json object, I will be using a 
        //file from my own site for the tutorial 
	//Then we declare a callback function to process the data
	$.getJSON('hcj.json',getPosts);
 
	//The process function, I am going to get the title, 
        //url and excerpt for 5 latest posts
	function getPosts(data){
 
		//Start a for loop with a limit of 5 
		for(var i = 0; i < 5; i++){
			//Build a template string of 
                        //the post title, url and excerpt
			var strPost = '<h2>' 
				      + data.posts[i].title
				      + '</h2>'
				      + '<p>'
				      + data.posts[i].excerpt
				      + '</p>'
				      + '<a href="'
				      + data.posts[i].url
				      + '" title="Read '
				      + data.posts[i].title
				      + '">Read ></a>';
 
			//Append the body with the string
			$('body').append(strPost);
 
		}
	}
 
}
 
//Fire off the function in your document ready
$(document).ready(function(){
	parseJson();				   
});

Alternar los colores de filas

En grandes listas o tablas, el hecho de alternar los colores de cada una de las listas que lo integran, puede mejorar increíblemente la legibilidad de la misma. Aquí tienes cómo alternar los colores de las filas utilizando algo de jQuery. Puedes utilizar el elemento HTML que quieras: td, tr, li, etc...

//jquery
  $('div:odd').css("background-color", "#F4F4F8");
  $('div:even').css("background-color", "#EFF1F1");


//html example
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
<div>Row 4</div>

Precarga de imagen como en Facebook

¿Has notado alguna vez la rapidez con la que se cargan las imágenes de los álbumes de fotos de Facebook? Esto se debe a que Facebook precarga cada una de las imágenes en la memoria caché de tu navegador antes de que puedas verlas. Así es como puedes lograr un funcionamiento similar en tu sitio web utilizando algo de magia jQuery.

var nextimage = "/images/some-image.jpg";
$(document).ready(function(){
window.setTimeout(function(){
var img = $("<img>").attr("src", nextimage).load(function(){
//all done
});
}, 100);
});

Hacer un div clickable

Aquí tienes una manera sencilla de hacer que el div contenedor de un enlace sea clickable. Digamos que tienes este código HTML:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

Las siguientes líneas de jQuery harán que el div padre sea clickable.

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Fuente: catswhocode.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP