Aumentar o disminuir el tamaño de la letra con jQuery
Escrito por Martín Iglesias y leído 8,212 veces. Ver comentarios
24ENERO/2011
- Categorías:
- Jquery
- Font Size
- Aumentar Letra
- Disminuir Letra
Una opción muy habitual en blogs o periódicos online y bastante útil es la de dar al usuario la posibilidad de aumentar o disminuir el tamaño de la letra de los textos que se presentan en pantalla.
Con jQuery es muy sencillo implementar esta opción. Para que el ejemplo funcione, deberemos establecer el tamaño de la fuente en porcentaje o em. Si definimos el tamaño de letra en pixels o puntos no se verá alterada por el script.
Implementación.
Es muy fácil, sólo depende de un pequeño código javascript y 3 enlaces que harán las funciones de aumentar, reducir y reiniciar el texto a su tamaño original.
<a class=”aumFuente” href=”#”>Aumentar</a> <a class=”disFuente” href=”#”>Disminuir</a> <a class=”reiFuente” href=”#”>Reiniciar</a>
$(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(tamActual , 10);
/* GRACIAS VIRGINIA POR TU COMENTARIO */
var nuevaFuente = tamActualNum*0.8;
$(‘html’).css(‘font-size’, nuevaFuente);
return false;
});
});Acerca del Autor:
Diseñador web freelance en Coruña Galicia | Martin Iglesias
Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.
Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!
Artículos relacionados:
- 20 plugins para jQuery que no pueden faltar en tus webs
- Excelente listado de 240 plugins para jquery
- Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
- jQuery Validate: la rápida validación de formularios.
- Calendario en PHP con eventos, jQuery y vTip
- Formularios web con jQuery Validate y envÃo por phpmailer y gmail
- 18 plugins jquery que no pueden faltar en tu web parte 2
Este artículo ha salido en un total de 330 búsquedas desde Google en sus 849 días de vida y ha sido visto 8,212 veces.
