Change font size

Question

I am having trouble getting the jquery font enlargement / reduction function. It has 3 sizes: large, medium (one by default) and small. The problem here is not the "reset" button, as in many examples on the Internet, instead there are simply two buttons to increase or decrease the font size.

The problem arose when I move to a larger font, and I want to make drerease to the middle. It does not return to the middle, it changes to a smaller value or backward (from smaller to larger). Is there any way to do this? I will be grateful for any help you can give me, thanks

Answer 1

Here is what I use:

<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>

HTML ( Increase, Decrease Reset), .

<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 some text
</div>

JSFiddle

Answer 2

jquery. . cookie https://github.com/carhartl/jquery-cookie

: http://jsfiddle.net/skibulk/eh5xr0z3/22/

:

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

Answer 3

, , . , , . , Kindle Android ( html- ): http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html

, , - :

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

javascript, , ( 1 , , ), ( , , , ):

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

Here is the script for you: http://jsfiddle.net/fordlover49/jbXmE/1/

Answer 4

You can use the following script:

<script >
$(document).ready(function() {
    $('#plus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) + 1;

        $('.post').css('font-size', curSize);
    });
    $('#minus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) - 1;
        if (curSize >= 12)
            $('.post').css('font-size', curSize);
    });
}); <

/ script>

See page for details: https://www.techxplus.com/2019/09/javascript-font-resizer.html