Increase font size of whole web page on button click event using jquery

Question

I want to increase font size in whole page when user click on increase button. It will be increase on bases of current font size. Following is sample code :

Answer 1

It's probably simplest to consider formatting your page for this functionality. E.g. use a fixed original body font-size, and have all elements use a font-size percentage. Then, you can simply use jQuery to set the body font-size, and all elements will adjust accordingly.

Answer 2

You can simply change font size of the body of whole page in a button click as below. here i changed the font-size in percentage.

$("#sizeUp").click(function() {

        $("body").css("font-size","70%");

 });

If you want to change each element size with some amount in each button click, then follow below coding..

  $('body *').each(function() {
      xsize= parseInt($(this).css('font-size')) + 1;    
        $(this).css('font-size', xsize+2);
  }); 

Answer 3

In addition to my previous comment, here is what I've made so far (again, assuming that you can't modify the HTML part) : http://jsfiddle.net/wared/JWUt9/. This solution is a bit dirty since it adds a style attribute and binds an extra font-size data to every element matched by the selector (in this case : p *). Furthermore, we have to loop through the entire set each time the user clicks the resize button. However, it allows to override fixed sizes defined from non inline styles.

If we had control over non inline styles, we could replace all fixed sizes from there by hand with em units for example, and we could do the same with inline fixed sizes via javascript. In the end, we could zoom in and out by simply modifying the container's font-size property, and descendant elements should resize automatically. Here is an interesting example from which we could start (scroll down a little to the first codepen demo) : http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/.

Answer 4

Your question was quite unclear (changing whole page font size) while your coding seems to target the specific container classed .parent 'childrens'.

[credits to wared and Zaheer Ahmed ]

Your coding was close, but the simpliest jQuery method was to .test() with the .attr('style')

if (/font-size:[^;]+px/.test($(this).attr('style'))) {
        $(this).css("font-size","+=2");
    }

Here is your solution jsFidled here :

$("#trigger").click(function() {
    /* the overall body tag for relative units */
    $("body").css("font-size","+=5%");
    /* targetting inlined font-size in pixels */     
    $('*').each(function (index, value) {
        if (/font-size:[^;]+px/.test($(this).attr('style'))) {
            $(this).css("font-size","+=2");
        }
    });
});

Answer 5

It can be done in one shot.

Just define the inner elements' font-size referencing its container font-size.

E.g:

<div class="container">
   <p class="par1">text1: 15px at start</p>
   <p class="par2">text2: 17px at start</p>
</div>
--------------------------------------------
.container {font-size: 10px}
.par1 {font-size: 1.5em}
.par2 {font-size: 1.7em}

The markup below, gives 15px to first paragraph and 17px to second. Because if the standard size setted in the container is 10px, then the conversion rates are:

• 1em = 10px // container initialization
• 1.5em = 15px
• 1.7em = 17px
• ... and so on ...

Now, you can update all font-size definitions, updating the container font-size.

Try this jsFiddle to play with this idea.

Answer 6

Try this one

$(this).css("font-size","+=2");