5

I'm having trouble to get a font increase/decrease jquery function done. It has 3 sizes: large, medium (default one) and small. Issue here is theres no "reset" button as it on many examples on the web, instead just two buttons to increase or decrease the font size.

The problem came up when I change to larger font and I want to drecrease to the middle one. It doesnt go back to middle, it changes to the smaller value or backwards (smaller to larger). Is there any way to accomplish this? I'll appreciate any help you can give me, thanks

1
  • You're going to need to include some code samples here to get an answer. Sounds like you've just got one button hooked to Big() and one to Small(), when they should instead adjust a variable up or down between the three states, which is then passed to the resize function.
    – Matt Lacey
    Dec 14, 2011 at 1:41

4 Answers 4

10

Here's 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>

And in the HTML (in this case, i use Increase, Decrease and Reset) but you can set to custom fonts.

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

Here's the JSFiddle

3
  • Hi! I already tried that, but theres no reset button. only 2 buttons: increase and decrease. Those buttons will be used to move into the three sizes. Dec 14, 2011 at 1:46
  • i put a <a id="resetFont"> Reset </a> which in JS use the default size, or you can setup a custom size if you need egL $('#container').css('font-size', '12px'); Dec 14, 2011 at 1:51
  • I didnt use your code, but it gave me an idea of how to resolve my problem, thanks! Dec 14, 2011 at 14:25
1

I created an actual jquery plugin for this. You can pass custom settings for your own sizes and button classes. It supports cookies via https://github.com/carhartl/jquery-cookie

Here's my fiddle: http://jsfiddle.net/skibulk/eh5xr0z3/22/

Here's the 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"});
0

Generally, if you want three font sizes I'd recommend not using buttons to increase and decrease the font size. I'd suggest instead you provide the user with examples of the font sizes and they can click on the one they'd like. As an example, look at how the Kindle does it on the Android ( I can't seem to find a good public html example right now): http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.html

However, if you want buttons, you can do something like this:

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

And for the javascript, here's an alternative that allows you to set the number of increments (set to 1 below, since that's what you wanted) as well as the size of an increment (note that you'll likely want to clean this up a bit):

$(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's a fiddle of it for you: http://jsfiddle.net/fordlover49/jbXmE/1/

0
0

You can use the below 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>

For details check on the page: https://www.techxplus.com/2019/09/javascript-font-resizer.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.