Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Redimensionar texto con jQuery

Escrito por: Martín el 14-04-2009 07:36:32

Redimensionar texto con jQuery

Leo en shopdev una interesante técnica para agrandar o reducir el texto de tu web mediante jQuery. Realmente es muy fácil de implementar.

Los únicos requisitos son, utilizar el mismo tipo de medida para los textos que utilices, es decir, por ejemplo, todos los textos marcados en porcentaje, pixels, puntos, etc... pero todos por igual.

Luego, incluyes la librería jQuery y el pequeño código que pongo a continuación y todo resuelto.

El autor, nos deja una demo disponible para probar antes de usar.

Código JAVASCRIPT

$(document).ready(function(){
  // Reset Font Size
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $('html').css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $('html').css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $('html').css('font-size', newFontSize);
    return false;
  });
});