Implement simple font zoomer in JavaScript & HTML

A lot of websites on internet provide users with an option to increase the font size of the page for better reading experience. Although nowadays almost all the web browsers supports zoom in/out functionality using mouse wheel scroll or other shortcut keys, it is sometimes a good idea to give user a way to increase/decrease the font size of web page. Let us implement a simple zoomer code in JavaScript that will increase/decrease the font size of the web page at client side without reloading the page from server. A small JavaScript snippet will be used to change the font size of the web page at client side.

JavaScript code

Let us check the following JavaScript code.
var fontSize = 1; function zoomIn() { fontSize += 0.1; document.body.style.fontSize = fontSize + "em"; } function zoomOut() { fontSize -= 0.1; document.body.style.fontSize = fontSize + "em"; }
Code language: JavaScript (javascript)
In the above JavaScript code, a global variable fontSize is defined with value 1. This variable’s value will be changed whenever user tries to increase or decrease the font size. Then we have two functions zoomIn() and zoomOut() to perform zoom in and zoom out respectively. The font size of the web page is changed by changing the attribute fontSize in document.body.style.

Calling JavaScript from HTML

You can place simple icons to zoom in and zoom out the text and call the zoomIn() and zoomOut() methods on click event. Or can place buttons to zoom in/out.
<input type="button" value="+" onClick="zoomIn()"/> <input type="button" value="-" onClick="zoomOut()"/>
Code language: HTML, XML (xml)

Online Demo

Click on below buttons and see the text getting zoomed..!!  
Get our Articles via Email. Enter your email address.

You may also like...

21 Comments

  1. hasnor says:

    Hi,

    How to put the both codes in HTML? please show the steps…

    Tq.

  2. Hi Hasnor,
    Following is the integrated code. Copy the code in FontZoomer.html and test it in your favorite browser.

    <html>
    <head>
     	<script language="javascript">
     	var fontSize = 1;
    	function zoomIn() {
    		fontSize += 0.1;
    		document.body.style.fontSize = fontSize + "em";
    	}
    	function zoomOut() {
    		fontSize -= 0.1;
    		document.body.style.fontSize = fontSize + "em";
    	}
    	</script>
    </head>
    <body>
    
    <input type="button" value="+" onClick="zoomIn()"/>
    <input type="button" value="-" onClick="zoomOut()"/>
    
    A quick brown fox jumps over lazy dog.
    
    </body>
    </html>
    
  3. hasnor says:

    Tq…. just put the codes in the head of html? …. how to put in the body part……..

  4. Hi Hasor,
    I have changed the code in my previous comment. take a look.
    Paste the javascript code in HEAD and buttons in BODY.

  5. bartazari says:

    good

  6. littlebear says:

    Thanks Viral Patel. Your code look very simple, I applied it on my test page, it worked very well. And I have a question related to that. I want to use cookie to carry whatever font size the users using to the next page they go (of course on the same web site). I found this code and put right before the tag but it doesn’t work. I’m not a programmer, can you please address me on this? Thanks.

    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = “; expires=”+date.toGMTString();
    }
    else var expires = “”;
    document.cookie = name+”=”+value+expires+”; path=/”;
    }

    function readCookie(name) {
    var nameEQ = name + “=”;
    var ca = document.cookie.split(‘;’);
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }

  7. Niladri says:

    good job done by you.thnx for that.but when I am using master page that time it doesn’t work. Can you please guide me on this? Thanks.

  8. amy says:

    thanks for the code of simple font zoomer in JavaScript

  9. annapurna says:

    what is em in that code?

    • em is the unit of size used to define font size in CSS. 1 em is equals to default font size that you specify in body of html document. If no default value is specified then 1em = 16px. Read this for more details on em: http://css-tricks.com/css-font-size/

  10. Steph says:

    Love the script! Easy to work with.
    Quick question: how do I specify that I only want what’s in a certain div or iframe to zoom?
    For example:

    &lt;div id=&quot;contentBody&quot;&gt; 


    or

    &lt;.iframe id =&quot;topic&quot;&gt;  

    • Ralph says:

      document.getElementById(“something”).style.fontSize = fontSize + “em”;

  11. Quick and simple, nice tutorial.

  12. srinakshatri says:

    How can we integrate javascript with vaadin component

  13. Zainal says:

    This working.. thanks for simple code.

  14. Nice Code working fine….

  15. s.DurgaPrasad says:

    nce information.But i have a problem when it is applied on a html table .please give suggestion to zoom the html table
    Thanks&Regards
    DurgaPrasad

  16. DurgaPrasad says:

    Hi It Is very useful if we zoom the data but it is not applicable for html table please tell me what we have to do for zooming a table or entier webpage
    Please tell me
    ‘Thanks
    Pk

  17. Morshed says:

    Thank you very much for your code about Font Zoomer In JavaScript & HTML. This code easily working.

  18. jax says:

    in this my website just in header text is working./ please help me

  19. sumit says:

    Nice Blog

Leave a Reply

Your email address will not be published. Required fields are marked *