Foros del Web » Programando para Internet » Jquery »

Enlarge fonts JQuery.

Estas en el tema de Enlarge fonts JQuery. en el foro de Jquery en Foros del Web. Buenos días, sucede que estoy haciendo(copiando, pegando, modificando) script con jquery para poder hacer el tipico enlarge fonts... @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original ...
  #1 (permalink)  
Antiguo 01/08/2011, 08:49
Avatar de NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 14 años, 1 mes
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
  #2 (permalink)  
Antiguo 01/08/2011, 10:20
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años
Puntos: 65
Respuesta: Enlarge fonts JQuery.

podés hacerlo más sencillo

Código HTML:
Ver original
  1.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  2.   <script>
  3.     $( function() {
  4.          var elementos = $('#bodyContent, #bodyContent *');
  5.          aumento = 0;
  6.  
  7.          $('#increaseFont').click( function(){
  8.              if (aumento < 4){
  9.                elementos.css('font-size', '+=1');
  10.                aumento++;
  11.            }
  12.         });
  13.  
  14.         $('#decreaseFont').click( function(){
  15.             if (aumento > 0){
  16.                 elementos.css('font-size', '-=1');
  17.                 aumento--;
  18.             }
  19.          });
  20.  
  21.     });
  22.     </script>
  23. </head>
  24.     Tamaño: <a href="#" id="increaseFont">+</a> | <a href="#" id="decreaseFont">-</a>
  25. <div id="bodyContent">
  26. <h1 class="title">Titulo con un font size</h1>
  27. <p>Parrafos</p>
  28. <h1>Otro encabezado con distinto tamaño de fuente</h1>
  29. Ul li, tables... etc
  30. </div>
  31.  
  32. </body>
  33. </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 original
  1. if (aumento < 4){
  2.                 elementos.css('font-size', '+=1');
  3.                 aumento++;
  4.             }

y para disminuir
Código Javascript:
Ver original
  1. if (aumento > 0){
  2.                 elementos.css('font-size', '-=1');
  3.                 aumento--;
  4.             }

cuando está en 0 tiene el valor original

se supone que en pixeles pero podes usuar cualquiera
  #3 (permalink)  
Antiguo 01/08/2011, 14:01
Avatar de NUCKLEAR
Moderador radioactivo
 
Fecha de Ingreso: octubre-2005
Ubicación: Cordoba-Argentina
Mensajes: 5.688
Antigüedad: 14 años, 1 mes
Puntos: 890
Respuesta: Enlarge fonts JQuery.

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
  1.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  2.  <script>
  3.  $( function() {
  4. var elementos = $('#bodyContent, #bodyContent *');
  5. aumento = 0;
  6.  
  7. $('#increaseFont').click( function(){
  8. if (aumento < 4){
  9. elementos.css('font-size', '+=1');
  10. aumento++;
  11. }
  12. });
  13.  
  14. $('#decreaseFont').click( function(){
  15. if (aumento > 0){
  16. elementos.css('font-size', '-=1');
  17. aumento--;
  18. }
  19. });
  20.  
  21. });
  22.  
  23. .title{ font-size: 15px;}
  24. .fuentes{font-size: 20px;}
  25.  
  26. </head>
  27.  Tamaño: <a href="#" id="increaseFont">+</a> | <a href="#" id="decreaseFont">-</a>
  28. <div id="bodyContent">
  29. <div class="fuentes">
  30. <h1 class="title">Titulo con un font size</h1>
  31. <p>Parrafos</p>
  32. <h1>Otro encabezado con distinto tamaño de fuente</h1>
  33. Ul li, tables... etc
  34. <p>Otro texto</p>
  35. </div>
  36.  
  37. </div>
  38. *
  39. </body>
  40. </html>

Saludos, y gracias por tu ayuda. Seria algo realmente util si se lograse hacer.
__________________
Drupal Argentina
  #4 (permalink)  
Antiguo 01/08/2011, 19:23
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 10 años
Puntos: 65
Respuesta: Enlarge fonts JQuery.

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
  1. <style>
  2. .title{ font-size: 15px;}
  3. .fuentes{font-size: 20px;}
  4. </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 original
  1. h1 {font-size: 40px}
  2. .title{ font-size: 15px;}
  3. .fuentes{font-size: 20px;}

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

Última edición por Dany_s; 01/08/2011 a las 19:40

Etiquetas: fonts
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:47.