Snippets de jQuery para sitios web responsive

Al desarrollar un sitio web o una aplicación responsive, jQuery puede serte de gran ayuda. De hecho, puedes llevar la experiencia del usuario que navega desde un dispositivo móvil a un nuevo nivel. En este artículo, he compilado unos cuantos snippets de jQuery para crear y mejorar sitios responsive.

Scroll a un elemento

Hacer scroll con el dedito todo el rato en un smartphone seguro que no es lo más divertido que hayas visto. Es por eso que puede ser muy útil configurar scrolls automáticos para que los visitantes no tarden 10 segundos para llegar a la información que están buscando.

Vamos a comenzar con un auto scroll. El siguiente código hará que el usuario haga scroll automáticamente a un elemento específico de la página:

$('html, body').animate({
    scrollTop: $("#target").offset().top
}, 1000);

Ahora vamos a ver cómo hacer que le usuario haga scroll a un elemento mediante un clic.

$('a#source').on('click', function(event) {
    $('body').scrollTo('#target');
});

Detectar el tamaño de pantalla del usuario

Las media queries de CSS te permiten el tamaño de la pantalla del usuario y aplicar distintas reglas CSS a elementos dependiendo de esto mismo.

Esto puede hacerse también mediante jQuery, y puede ser la mar de útil para lograr resultados que no se pueden lograr con CSS. En el siguiente ejemplo te muestro cómo detectar el tamaño de pantalla del usuario, y dependiendo de esto, agregar un elemento a una lista.

if ($(window).width() < 960) {
    $( "ul.mylist").append("<li>Un elemento mas en la lista</li>");
}

Convertir el menú de navegación en un desplegable

Cuando tu sitio web presenta muchos elementos en su menú de navegación, puede tornarse complicado el visualizarlo en pantallas pequeñas. Por eso, una solución sencilla a este problema es convertir el propio menú en un desplegable.

Este código obtendrá todos los elementos del menú y los insertará en un select desplegable.

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

Animate height/width a auto

Si has intentado utilizado algo.animate({“height”: “auto”}); en un elemento, habrás comprobado que no funciona. Por suerte, existe una solución rápida y eficiente a este problema.

Aquí tienes la función.

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;
    return this.each(function(i, el){
        el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();
        
        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });

Y aquí cómo utilizarla.

$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000); 
});

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000); 
});

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000); 
});

Imágenes lazy load

El lazy loading es una técnica que fuerza a la página a cargar las imágenes unicamente cuando son visibles por el usuario. Ha demostrado ser muy eficaz para mejorar la velocidad de carga, lo cual es extremadamente importante en términos de experiencia de usuario y SEO.

Hay muchos plugins de jQuery dedicados a implementar el lazy load en aplicaciones web. Si utilizas WordPress, te recomiendo que eches un vistazo a este plugin.

En cuanto a los plugins de lazy load para jQuery, yo suelo utilizar este, el cual se llama simplemente Lazy Load. Utilizarlo es muy sencillo. El primer paso es importar el plugin en tu página:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>

Ahora el código HTML. Por defecto, Lazy Load supone que la URL de la imagen original de alta resolución se encuentra en el atributo data-src. También puedes incluir un placeholder de la imagen en baja resolución en el atributo src.

<img class="lazyload" data-src="img/example.jpg" width="765" height="574">
<img class="lazyload" src="img/example-thumb.jpg" data-src="img/example.jpg" width="765" height="574">

Para activar el lazy load, solo tienes que:

lazyload();

COMPARTE ESTE ARTÍCULO

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