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.
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.
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; }
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/
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
Hi,
How to put the both codes in HTML? please show the steps…
Tq.
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>Tq…. just put the codes in the head of html? …. how to put in the body part……..
Hi Hasor,
I have changed the code in my previous comment. take a look.
Paste the javascript code in HEAD and buttons in BODY.
good
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;
}
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.
thanks for the code of simple font zoomer in JavaScript
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/
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:
or
document.getElementById(“something”).style.fontSize = fontSize + “em”;
Quick and simple, nice tutorial.
How can we integrate javascript with vaadin component
This working.. thanks for simple code.
Nice Code working fine….
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
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
Thank you very much for your code about Font Zoomer In JavaScript & HTML. This code easily working.
in this my website just in header text is working./ please help me
Nice Blog