Can we Zoom in / Zoom out a web page using Java Script and HTML

Hi,

               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.

Knowledge Base:

http://viralpatel.net/blogs/2009/03/implement-simple-font-zoomer-in-javascript-html.html

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()"/>   Thanks,   Rajesh Kumar yuvaraj