Skip navigation

Una opción muy habitual en blogs y prensa online es la de dar al usuario la posibilidad de aumentar o disminuir el tamaño de la letra de los artículos para su comodidad a la hora de leer la noticia.

Con jQuery es muy sencillo implementar esta opción. Como ejemplo vamos a ver el código necesario para dotar a nuestra web con esta característica. Para ello nos basaremos en el tamaño de la fuente a nivel general de la página (aunque se podría especificar el elemento al que queremos que afecte).

Lo primero será crear tres enlaces que funcionarán como botones para aumentar, disminuir y reiniciar el tamaño de la fuente:

<a class=”aumFuente” href=”#”>Aumentar</a>
<a class=”disFuente” href=”#”>Disminuir</a>
<a class=”reiFuente” href=”#”>Reiniciar</a>

Lo siguiente será aplicarle el código necesario en el evento click de cada uno de los enlaces:

$(document).ready(function(){
// Reiniciar el tamaño de la fuente
var tamOriginal = $(‘html’).css(‘font-size’);
$(“.reiFuente”).click(function(){
$(‘html’).css(‘font-size’, tamOriginal);
});
// Incrementar el tamaño de la fuente
$(“.aumFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(tamActual, 10);
var nuevaFuente = tamActualNum*1.2;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
// Disminuir el tamaño de la fuente
$(“.disFuente”).click(function(){
var tamActual = $(‘html’).css(‘font-size’);
var tamActualNum = parseFloat(currentFontSize, 10);
var nuevaFuente = tamActualNum*0.8;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
});

Con esto tendríamos implementada la funcionalidad. Puedes ver una demostración online.

Vía: ShopDev
About these ads

One Trackback/Pingback

  1. By Bitacoras.com on 28 mar 2009 at 2:50 pm

    Información Bitacoras.com…

    Valora en Bitacoras.com: Una opción muy habitual en blogs y prensa online es la de dar al usuario la posibilidad de aumentar o disminuir el tamaño de la letra de los artículos para su comodidad a la hora de leer la noticia. Con jQuery es muy sencill…

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: