Increasing/decreasing Font Size On Button Click

I am sure you guys must have seen that font resizing option on some website where they display alphabet 'A' in small, medium and large sizes clicking on which changes the font size

Solution 1:

1. It is called "font size change options", or "font resizer". Here is a simple and minimal 5 lines of code jQuery tutorial: http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html

A bit of the code that enlarges the font size:

newFontSize= parseInt($('#content').css('font-size')) + 2;
$('#content').css('font-size', newFontSize);

1. The user could just use CTRL+ in browser. The problem is that the final user doesn't know this trick. This is a fast and simple implementation, no need to convince the client against it. I find myself getting hard to see clear small text after 10 hours of programming. Maybe the client has sight problems and needs to address others like him.

Solution 2:

"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."

Reference

So to do that you can use a function callback which will return the actual value, then you return the new value.

Like the following.

  $("#fontPlusBtn").click(function (){
        $("#textDiv > *").css("font-size", function(i, value) {
            returnparseInt(value) * 1.1;
        });
    });

Working Demo for Increasing Font Size on Button Click:

I hope this helps you as you described font size change on Button Click.

Solution 3:

What is the target group of your client? Adding such feature is generally considered good practice of web accessibility. It doesn't really take up too much space on the screen and doesn't mess with the design but gives users the options to enlarge the text in case they are having troubles reading the text.

I wouldn't try to argue against it but instead find a neat way to implement the functionality.

BBC's accessibility policy is a good read: http://www.bbc.co.uk/accessibility/best_practice/policy.shtml