Mi font-size

Script para cambiar el tamaño de la fuente dinámicamente mediante jQuery

gauguin

archivado en: JavaScript / 15 octubre, 2013

Necesitaba para una cosa del trabajo el plugin de font-size  de Frederico Soares Vanelli, del que ya hablé en una entrada, y de pronto descubrí que la página ya no existía; así que me hice mi propio script, que es más simple que un botijo. Lo pongo aquí, sin estilos, por si a alguien más le viene bien.

Estos son los botones:

<a id="js-font-size-menos" href="#">A-</a>

<a id="js-font-size-default" href="#">A</a>

<a id="js-font-size-mas" href="#">A+</a>

En el interior de este contenedor se coloca el texto que será ampliado o reducido (el desarrollo):

<div class="container js-font-size-contenedor">

// Aquí todo el desarrollo

<div>

Y este es el script que puedes poner en un archivo js (por ejemplo, mm-font-size.js):

$(document).ready(function() {

$("#js-font-size-menos").click(function() {

temporal = $(".js-font-size-contenedor").css('font-size');

temporal = (Math.round(temporal.replace("px","")))-2;

// Cambia este valor por el tamaño mínimo que alcanzará la fuente

var mmFontSizeMin = 8;

if ( temporal >= mmFontSizeMin ) {

$(".js-font-size-contenedor").css('font-size',temporal);

}

});

$("#js-font-size-default").click(function() {

// Cambia este valor por el tamaño por defecto de la fuente

var mmFontSizeDef = 16;

$(".js-font-size-contenedor").css('font-size',mmFontSizeDef);

});

$("#js-font-size-mas").click(function() {

temporal = $(".js-font-size-contenedor").css('font-size');

temporal = (Math.round(temporal.replace("px","")))+2;

// Y este por el máximo

var mmFontSizeMin = 24;

if ( temporal <= mmFontSizeMin ) {

$(".js-font-size-contenedor").css('font-size',temporal);

}

});

 

});

Ya solo falta enlazar el script desde el index o dónde sea que quieres cargarlo y chispún (ojo, después de haber cargado jQuery, claro). Lo dicho, más simple que un botijo. Si tengo tiempo, otro día lo adapto para WordPress.

|| Tags: , ,

valoración de los lectores sobre Mi font-size

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 2.7 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Una respuesta a “Mi font-size

  1. Hola! Parece que me las arreglé para conseguir que todo funcione correctamente, pero cuando alguúm usuario hace clic en una de las 5 opciones, as estrellas simplemente desaparecen y el usuario sólo puede ver que si votado a cargar la página. Puede comprobar isto en la url con los datos que informo nesta comentario y estaría muy agradecido si usted me podría ayudar. Sorry for my very bad spanish!