Enlarge fonts JQuery.

NUCKLEAR · #1 (**permalink**) 01/08/2011, 07:49

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$(document).ready( function() {
    // Reset Font Size
     var lb = $('#bodyContent p, #blockContentStd *, #bodyContent ul li, #bodyContent h1, #bodyContent h2,  #bodyContent h3, #bodyContent table tr td');
  // var lb = $('.enlargeFont').find($tags);
    var originalFontSize = lb.css('font-size');
 
    $("#resetFont").click( function() {
    $(lb).css('font-size', originalFontSize);
    });
    // Increase Font Size
    $("#increaseFont").click( function() {
    var currentFontSize = $(lb).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    if(newFontSize < 20) {
    $(lb).css('font-size', newFontSize);
    }
    return false;
    });
  // Decrease Font Size
  $("#decreaseFont").click( function() {
  var currentFontSize = $(lb).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
 
  if(newFontSize > 8) {
  $(lb).css('font-size', newFontSize);
  }
 
  })
  // add border class to tables
 
});

El script funciona pero surge un problema...

Sucede que el contenido lo tengo asi(por ejemplo)

Código HTML:

Ver original<div id="bodyContent">
<h1 class="title">Titulo con un font size</h1>
<p>Parrafos</p>
<h1>Otro encabezado con distinto tamaño de fuente</h1>
Ul li, tables... etc
</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.

Dany_s · #2 (**permalink**) 01/08/2011, 09:20

podés hacerlo más sencillo

Código HTML:

Ver original<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    $( function() {
         var elementos = $('#bodyContent, #bodyContent *');
         aumento = 0;
 
         $('#increaseFont').click( function(){
             if (aumento < 4){
                elementos.css('font-size', '+=1');
                aumento++;
            }
         });
 
         $('#decreaseFont').click( function(){
             if (aumento > 0){
                elementos.css('font-size', '-=1');
                aumento--;
            }
         });
 
    });
    </script>
</head>
<body>
    Tamaño: <a href="#" id="increaseFont">+</a> | <a href="#" id="decreaseFont">-</a>
<div id="bodyContent">
<h1 class="title">Titulo con un font size</h1>
<p>Parrafos</p>
<h1>Otro encabezado con distinto tamaño de fuente</h1>
Ul li, tables... etc
</div>
 
</body>
</html>

la seleccion $('#bodyContent, #bodyContent *')
#bodyContent para el texto que esté dentro del div y #bodyContent * para todos los elementos hijos de #bodyContent

aumento = 0 para saber cuantos click hicieron al incrementar o decrementar
si querés que aumenten sólo 4 pixeles con un condicional
y en el parámetro del valor de la funte es incrementar el valor actual en 1

Código Javascript:

Ver originalif (aumento < 4){
                elementos.css('font-size', '+=1');
                aumento++;
            }

y para disminuir

Código Javascript:

Ver originalif (aumento > 0){
                elementos.css('font-size', '-=1');
                aumento--;
            }

cuando está en 0 tiene el valor original

se supone que en pixeles pero podes usuar cualquiera

NUCKLEAR · #3 (**permalink**) 01/08/2011, 13:01

Hola Dany_s gracias por tu ayuda, el tema es que necesito distinguir cada etiqueta individualmente, que esta dentro de #bodyContent, si no lo hago, como te digo me toma el valor del elemento anterior... Mira este ejempo para que lo veas mas claro.

Código HTML:

Ver original<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script>
 $( function() {
var elementos = $('#bodyContent, #bodyContent *');
aumento = 0;
 
$('#increaseFont').click( function(){
if (aumento < 4){
elementos.css('font-size', '+=1');
aumento++;
}
 });
 
$('#decreaseFont').click( function(){
if (aumento > 0){
elementos.css('font-size', '-=1');
aumento--;
}
});
 
});
</script>
<style>
 
.title{ font-size: 15px;}
.fuentes{font-size: 20px;}
 
</style>
</head>
<body>
 Tamaño: <a href="#" id="increaseFont">+</a> | <a href="#" id="decreaseFont">-</a>
<div id="bodyContent">
<div class="fuentes">
<h1 class="title">Titulo con un font size</h1>
<p>Parrafos</p>
<h1>Otro encabezado con distinto tamaño de fuente</h1>
Ul li, tables... etc
<p>Otro texto</p>
</div>
 
</div>
*
</body>
</html>

Saludos, y gracias por tu ayuda. Seria algo realmente util si se lograse hacer.

Dany_s · #4 (**permalink**) 01/08/2011, 18:23

no te entiendo, creo que es sobre los h1 y estás probando en ie no?
es por problemas con el css o con navegadores mejor dicho

hace un reset de estilos y te liberás de dolores de cabeza

fijate que sin darle valor al h1

Código CSS:

Ver original<style>
.title{ font-size: 15px;}
.fuentes{font-size: 20px;}
</style>

en ff te deja el h1 que está dentro de .fuentes en 40px y en ie en 20

si le das una medida a los h1 ya se arregla

Código CSS:

Ver originalh1 {font-size: 40px}
.title{ font-size: 15px;}
.fuentes{font-size: 20px;}

por eso es bueno hacer un reset para no tener valores por defectos que son diferentes en cada navegador