Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/08/2011, 07:49
Avatar de NUCKLEAR
NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 18 años, 5 meses
Puntos: 890
Enlarge fonts JQuery.

Buenos días, sucede que estoy haciendo(copiando, pegando, modificando) script con jquery para poder hacer el tipico enlarge fonts...

Código Javascript:
Ver original
  1. $(document).ready( function() {
  2.     // Reset Font Size
  3.      var lb = $('#bodyContent p, #blockContentStd *, #bodyContent ul li, #bodyContent h1, #bodyContent h2,  #bodyContent h3, #bodyContent table tr td');
  4.   // var lb = $('.enlargeFont').find($tags);
  5.     var originalFontSize = lb.css('font-size');
  6.  
  7.     $("#resetFont").click( function() {
  8.     $(lb).css('font-size', originalFontSize);
  9.     });
  10.     // Increase Font Size
  11.     $("#increaseFont").click( function() {
  12.     var currentFontSize = $(lb).css('font-size');
  13.     var currentFontSizeNum = parseFloat(currentFontSize, 10);
  14.     var newFontSize = currentFontSizeNum*1.2;
  15.     if(newFontSize < 20) {
  16.     $(lb).css('font-size', newFontSize);
  17.     }
  18.     return false;
  19.     });
  20.   // Decrease Font Size
  21.   $("#decreaseFont").click( function() {
  22.   var currentFontSize = $(lb).css('font-size');
  23.   var currentFontSizeNum = parseFloat(currentFontSize, 10);
  24.   var newFontSize = currentFontSizeNum*0.8;
  25.  
  26.   if(newFontSize > 8) {
  27.   $(lb).css('font-size', newFontSize);
  28.   }
  29.  
  30.   })
  31.   // add border class to tables
  32.  
  33. });

El script funciona pero surge un problema...

Sucede que el contenido lo tengo asi(por ejemplo)

Código HTML:
Ver original
  1. <div id="bodyContent">
  2. <h1 class="title">Titulo con un font size</h1>
  3. <p>Parrafos</p>
  4. <h1>Otro encabezado con distinto tamaño de fuente</h1>
  5. Ul li, tables... etc
  6. </div>

Sucede que si ejecuto el script funciona pero al tener los elementos genericos(Ejm h1) me toma la medida de la fuente del primer h1, y se pasa por alto la segunda etiqueta...(obviamente ambos tienen distinta medida), entonces lo que necesitaria es poder hacer un "select de cada etiqueta individual dentro de #bodycontent" asi al tomar la medida de la fuente lo hara individualmente....

Alguna sugerencia? he estado probando con each() pero no logro hacer que funcione. Me he leido cuanto manual hay por alli y no lo he conseguido....

Saludos.
__________________
Drupal Argentina