tamaño del texto de la fuente

Question

Tengo problemas para hacer que la función jquery aumente/disminuya la fuente. Tiene 3 tamaños: grande, mediano (por defecto) y pequeño. Problema aquí no hay ningún botón de "reinicio" como en muchos ejemplos en la web, sino solo dos botones para aumentar o disminuir el tamaño de la fuente.

El problema surgió cuando cambié a una fuente más grande y deseo aumentar al medio. No vuelve al centro, cambia al valor más pequeño o al revés (de menor a mayor). ¿Hay alguna forma de lograr esto? Voy a apreciar cualquier ayuda que me puedan dar, gracias

Answer 1

Esto es lo que yo uso:

<script> 
$(document).ready(function() { 
    var size = $('#container').css('font-size'); 
    $("#largeFont").click(function(){ 
     $('#container').css('font-size', '30px'); 
     return false; 
    }); 
    $("#resetFont").click(function(){ 
     $('#container').css('font-size', size); 
     return false; 
    }); 
    $("#increaseFont").click(function() { 
     var size = $('#container').css('font-size'); 
     $('#container').css('font-size', parseInt(size)+2); 
     return false; 
    }); 
    $("#decreaseFont").click(function() { 
     var size = $('#container').css('font-size'); 
     $('#container').css('font-size', parseInt(size)-2); 
     return false; 
    }); 
    $("#smallFont").click(function(){ 
     $('#container').css('font-size', '10px'); 
     return false; 
    }); 
}); 

</script> 

Y en el HTML (en este caso, yo uso aumentar, disminuir y Reset), pero se puede establecer a Fuentes personalizadas.

<a id="largeFont">Large Font</a> - 
<a id="increaseFont">Increase Font</a> - 
<a id="decreaseFont">Decrease Font</a> - 
<a id="smallFont">Small Font</a> - 
<a id="resetFont">Reset</a> 

<div id="container"> 
Here's some text 
</div> 

Aquí está la JSFiddle

Answer 2

En general, si quieres tres tamaños de fuente me gustaría recomendar no usar los botones para aumentar y disminuir el tamaño de la fuente. En su lugar, le sugiero que le proporcione al usuario ejemplos del tamaño de las fuentes y que puedan hacer clic en el que desea. Como ejemplo, mire cómo Kindle lo hace en Android (parece que no puedo encontrar un buen ejemplo de html público en este momento): http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html

Sin embargo, si quiere botones, puede hacer algo como esto:

<button id="largerFont">Larger Font</button> 
    <button id="smallerFont">Smaller Font</button> 
    <p id="container">Change the font size of this.</p> 

Y para el Javascript, aquí es una alternativa que le permite establecer el número de incrementos (ajustado a 1, a continuación, ya que eso es lo que quería), así como el tamaño de un incremento (Nótese que tendrá probablemente quiera limpiar esto un poco):

$(document).ready(function() { 
    var size = parseInt($('#container').css('font-size').replace("px", ""), 10); 
    var incrementAmount = 4; 
    var increments = 1; 
    $("#largerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);  

    $('#container').css('font-size', curSize + incrementAmount);   
    if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) { 
     $("#largerFont").prop("disabled", true); 
    } 
    $("#smallerFont").prop("disabled", false); 

    return false; 
    }); 
    $("#smallerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);  

    $('#container').css('font-size', curSize - incrementAmount);   
    if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) { 
     $("#smallerFont").prop("disabled", true); 
    } 
    $("#largerFont").prop("disabled", false); 

    return false; 
    }); 
}); 

Aquí hay un violín para ti: http://jsfiddle.net/fordlover49/jbXmE/1/

Answer 3

Creé un plugin jquery real para esto. Puede pasar configuraciones personalizadas para sus propios tamaños y clases de botones. Es compatible con las galletas a través de https://github.com/carhartl/jquery-cookie

Aquí está mi violín: http://jsfiddle.net/skibulk/eh5xr0z3/22/

Aquí está el plugin:

(function($){ 
    $.fontSizer = function(options) { 
     // Load Options 
     var opt = $.extend({ 
      selector:  "body", 
      sizeMaximum: 20, 
      sizeDefault: 14, 
      sizeMinimum: 10, 
      sizeInterval: 2, 
      buttonIncrease: ".font-sizer .increase", 
      buttonDecrease: ".font-sizer .decrease", 
      buttonReset: ".font-sizer .reset", 
     }, options); 

     // Initialize 
     $(opt.buttonIncrease).click(increase); 
     $(opt.buttonDecrease).click(decrease); 
     $(opt.buttonReset).click(reset); 
     render($.cookie('font-size') || opt.sizeDefault); 

     // Increase Handler 
     function increase() { 
      size = parseFloat($(opt.selector).css("font-size")); 
      size = Math.min(size + opt.sizeInterval, opt.sizeMaximum); 
      render(size); 
     } 

     // Decrease Handler 
     function decrease() { 
      size = parseFloat($(opt.selector).css("font-size")); 
      size = Math.max(size - opt.sizeInterval, opt.sizeMinimum); 
      render(size); 
     } 

     // Reset Handler 
     function reset() { 
      render(opt.sizeDefault); 
     } 

     // Render 
     function render(size) { 
      $(opt.selector).css("font-size", size +"px"); 
      $(opt.buttonIncrease).prop("disabled", (size >= opt.sizeMaximum)); 
      $(opt.buttonDecrease).prop("disabled", size <= opt.sizeMinimum); 
      $(opt.buttonReset).prop("disabled", (size == opt.sizeDefault)); 
      $.cookie('font-size', size); 
     } 
    }; 
})(jQuery); 

jQuery.fontSizer({selector:"body"});