Increase and decrease font-size limit to maximum and minimum jQuery

Question

I have a jQuery script that increases or decreases the font-size and line-height of my websites CSS.

I want the increase size to be limited to three clicks, and the decrease size to only function once the increase size link has been clicked. So that the default size cannot be reduced, therefor making the lowest decrease size, the default size.

If the user changes the font-size, and navigates to another page within the site, I'd like the "new size" to be displayed. i.e. the font-size doesn't revert to the default size.

The following script only increases and decreases the font-size and line-height:

(function ($) {
    $.fn.fontResize = function (options) {
        var settings = {
            increaseBtn: $('#incfont'),
            decreaseBtn: $('#decfont')
        };
        options = $.extend(settings, options);
        return this.each(function () {
            var element = $(this);
            options.increaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize + 2) + 'px');
                element.css('line-height', (baseLineHeight + 2) + 'px');
            });
            options.decreaseBtn.on('click', function (e) {
                e.preventDefault();
                var baseFontSize = parseInt(element.css('font-size'));
                var baseLineHeight = parseInt(element.css('line-height'));
                element.css('font-size', (baseFontSize - 2) + 'px');
                element.css('line-height', (baseLineHeight - 2) + 'px');
            });
        });
    };
})(jQuery);
$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize();
});

I've created a jsfiddle for this: http://jsfiddle.net/Lv2x4/

Answer 1

You can use a variable to keep track of where you are in the font size increasing and decreasing. Here's a revised version of your fiddle, and code:

(function ($) {
    $.fn.fontResize = function(options){
    var increaseCount = 0;
    var self = this;

    var changeFont = function(element, amount){
      var baseFontSize = parseInt(element.css('font-size'), 10);
      var baseLineHeight = parseInt(element.css('line-height'), 10);
      element.css('font-size', (baseFontSize + amount) + 'px');
      element.css('line-height', (baseLineHeight + amount) + 'px');
    };

    options.increaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 3){ return; }
      self.each(function(index, element){
        changeFont($(element), 2);
      });
      increaseCount++;
        });

    options.decreaseBtn.on('click', function (e) {
      e.preventDefault();
      if(increaseCount === 0){ return; }
      self.each(function(index, element){
        changeFont($(element), -2);
      });
      increaseCount--;
    });
  }
})(jQuery);

$(function () {
    $('body,h1,h2,h3,h4,h5,h6,p,ul,ol,a,input').fontResize({
    increaseBtn: $('#incfont'),
    decreaseBtn: $('#decfont')
  });
});

http://jsfiddle.net/Lv2x4/7/

I also made fontResize pass the buttons in during invocation, which makes more sense if you're trying to design this as a jQuery component. Also, since the logic to change font size is repeating code, I separated that into its own function, so you don't repeat yourself.

EDIT: whoops, skimped over the part that you wanted persistence as well! That's easy enough through localStorage. Clicky here.

http://jsfiddle.net/Lv2x4/9/

Answer 2

Without a backend to store the user's settings, you would need to use a cookie, sessionStorage or localStorage to save the setting on the browser.

Here's a pretty decent jquery plugin for CRUD-ing cookies.

Answer 3

Demo

JavaSript Code I changed:

return this.each(function () {
  var element = $(this),
      clicks = 0; // add a clicks counter

  options.increaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks < 3) { // make sure limit is not exceeded
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize + 2) + 'px');
      element.css('line-height', (baseLineHeight + 2) + 'px');
      clicks += 1; // increase by 1
    }
  });

  options.decreaseBtn.on('click', function (e) {
    e.preventDefault();
    if (clicks > 0) { // make sure there are clicks left
      var baseFontSize = parseInt(element.css('font-size'));
      var baseLineHeight = parseInt(element.css('line-height'));
      element.css('font-size', (baseFontSize - 2) + 'px');
      element.css('line-height', (baseLineHeight - 2) + 'px');
      clicks -= 1; // decrease number of clicks left
    }
  });

This would work. But for the storage of user settings, you will have to use localstorage, sessionStorage, or cookies.

Answer 4

use two variables var incr=0; var decr=0; and if condition to limit your font size increment to Three clicks and also consider one thing that when you click on button if other button is clicked then you need to decrease value of other variable so that you always get three clicks to increment/decrement font size.(jsfiddle link WORKING....)

            options.increaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(incr<3){
            element.css('font-size', (baseFontSize + 2) + 'px');
            element.css('line-height', (baseLineHeight + 2) + 'px');
            incr++;                
            if(decr>0)
            {decr--;  }
            }
        });
            options.decreaseBtn.on('click', function (e) {
            e.preventDefault();
            var baseFontSize = parseInt(element.css('font-size'));
            var baseLineHeight = parseInt(element.css('line-height'));

            if(decr<3){
            element.css('font-size', (baseFontSize - 2) + 'px');
            element.css('line-height', (baseLineHeight - 2) + 'px');
            decr++;
            if(incr>0)
            {incr--; }

        }
        });