Implement simple font zoomer in JavaScript & HTML
- By Viral Patel on March 27, 2009
- Featured, JavaScript
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";
}
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()"/>
Online Demo
Click on below buttons and see the text getting zoomed..!!
Get our Articles via Email. Enter your email address.
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;
}