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 :

<div class='parent' style='font-size:15px'>
    <div class='c1'>div 1</div>
    <div class='c2'>div 2</div>
    <div class='c3'>div 3</div>
    <div class='c4'>div 4</div>
    <table style="font-size:17px">
        <tr>
            <th>test 1</th>
            <th style='font-size:11px'><div>test 1.1</div><div style='font-size:22px'>test 1.2</div></th>
            <th>test 2</th>
        </tr>
    </table>
</div>

Here is my jquery code but it will not work properly:

$(document).ready(function(){
    $('.parent').find('*').each(function(){
        curSize=$(this).css('font-size');
        arrCurSize=curSize.toUpperCase().split("PX");
        if(arrCurSize.length==2){
            //alert(arrCurSize[0]);
            $(this).css('font-size',((parseInt(arrCurSize[0])+2)+"PX"));
            //alert($(this).css('font-size'));

        }
    });
})

@MilchePatern it's no duplicated because in your link it will set fixed font-size and in my requirement i want to increase font size with any fixed amount of each tags using their current font-size... — Dipen, Dec 15 '13 at 07:44
See this answer : http://stackoverflow.com/questions/20592932/jquery-match-elements-with-style-font-size-in-px/20593041#answer-20593041 where user wared provided a neet jquery selection that will most probably suit your needs. — Milche Patern, Dec 15 '13 at 09:39
Assuming that you can't modify the HTML part, are you able to override *non* inline styles? Indeed, the most annoying part comes from fixed sizes which are *not* defined from the style attribute. — , Dec 16 '13 at 18:31

score 2 · Answer 1 · answered Dec 15 '13 at 08:50

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.

Viktor, what happens when you are not able to reform the html markups? — Milche Patern, Dec 15 '13 at 19:56

score 1 · Accepted Answer · 2013-12-16T19:30:03.903

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

I wonder why this got accepted for an answer while some others were more straingt to the point of finding 'only' elements with inlined style to change the font-size. — Milche Patern, Dec 25 '13 at 02:45
@MilchePatern I guess this is due to this sentence : "it allows to override fixed sizes defined from *non* inline styles". But you should ask the asker directly :) — , Dec 25 '13 at 08:58

Haji · Answer 3 · 2013-12-15T07:40:12.090

0

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

edited Dec 15 '13 at 07:40

answered Dec 15 '13 at 07:16

Haji

1,999
1
15
21

1

it will not working because it will set fixed 70% font-size of body and all the child element which inherit body's font-size. – Dipen Dec 15 '13 at 07:18
@Dipen you are asked to change the font size of whole page only. you dont specify the size.. – Haji Dec 15 '13 at 07:25

score 0 · Answer 4 · answered Dec 15 '13 at 07:24

0

Try this one

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

answered Dec 15 '13 at 07:24

Nikhil Kudtarkar

169
8

score 0 · Answer 5 · edited May 23 '17 at 12:19

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

score 0 · Answer 6 · answered Dec 15 '13 at 10:51

0

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.

answered Dec 15 '13 at 10:51

dhc

647
8
17

1

How about implementing this in someone else's work where you are contrain to work over some 'silly patching designer' ? Or what about when you use a plugin that do not apply to your html-css framework ? – Milche Patern Dec 15 '13 at 19:46
Then this approach wouldn't work. That didn't seem to be the OP case, and it's worth considering in a lot of situations. – dhc Dec 15 '13 at 21:10

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

6 Answers6

Linked