Redimensionar texto con jQuery

Escrito por: Martín el 14-04-2009 07:36:32 y leído 903 veces

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;
  });
});

Categorías: •

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.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

jquery texto • texto jquery • texto con jquery • jquery agrandar texto • agrandar texto con jquery • textos jquery • texto jquery css • agrandar texto jquery • texto en jquery • redimensionar texto • textarea autoajustable jquery • font size jquery • agrandar texto en web con jquery • agrandar letra con jquery • div autoajustable jquery • ampliar texto web jquery • jquery agrandar div • jquery zoom texto • efectos de texto con jquery • diseño web botones para agrandar y achicar texto • efecto de letras jquery • engrandeser el contenido de un div jquery • agrandar div con jquery • jquery agrandar fuente • jquery redimensionar texto • zoom en texto con jquery • libreria redimensionar texto • jquery efectos de texto • agrander texto jquery • Redimensionar texto con jQuery • reducir y agrandar fuente con jquery • efectos en texto en jquery • redimencionar texto css jquery • resizar letra con jquery • efecto texto jquery • texto dinamico jquery • jquery agrandar letra • textos en jquery • texto parpadeante jquery • justificar texto con jquery • efecto zoom texto jquery • click agrandar y achicar div jquery • código redimensionar textos web • jquery css redimensionar • alargar texto con jquery • jquery zoom reducir tamaño • jquery alargar div • jquery efectos texto • hacer crecer texto con jquery • jquery justificar contenido en combos • efectos de texto jquery • jquery ejemplos justificar contenido en combos • css jquery de texto • efecto zoom jquery en texto • jquerry texto • texto informativo jquery • efectos de redimension de enlace en jquery • alargar div jquery • jquery efecto zoom texto • obtener textos de una lista con jquery • libreria jquery textos dinamicos • jquery justificar parafó • jquery efectos redimensionamiento • efecto zoom jquery • jquery efectos reducir alto div • ejemplos resueltos usando la libreria jquery validate • Textarea autoajustable • texto alineado con jquery • textarea autoajustable con jquery • navegador no funciona agrandar fuente jquery • redimensionar div dinamicamente • zoom jquery div texto • redimensionar textos jquery mobile • redimensionar texto jquery • textarea autoajustable javascript • jquery justificar texto • css y jquery y texto • efectos en textos con jquery • jquery redimensionar web mediante zoom • informativo jquery accordion • css imagen autoajustable header • textos con jquery • redimensionar un textarea con jquery • achicar text en jquery mobile • como conocer el largo de un texto jquery • reducir texto con jquery • jquery alargar letras • jquery menu efecto agranda • css redimensionar fuentes • css font-size autoajustable • javascript agrandar o disminuir fuente • alargar textarea con jquery • jquery textos • texto dinámico jquery • redimensionar texto escrito html • imagenes y texto dinamico jquery • menu jquery redimensiona • font-size a texto con jquery • jquery lupa en texto html • jquery agrandar textarea •