Javascript Magnifier ver 0.97
Avaiable at  ObieWebsite.SourceForge.Net

Written by Dino Termini - - May 9, 2003
This script is freeware (GPL) but if you use it, please let me know!

Portions of code by zoomIN, zoomOUT
Written by Nguyen Duong Minh (Obie) - - April 14, 2003

Portions of code by Webreference Javascript Cookie Functions
Jupirmedia Corporation

Text inner here is not be Zoom!

New features

Scroll bars, text in form inputs, "class=noresize" area can not be resize. Uses COOKIE to store user's favourite resolution.

Fixed some BUG(s). Works in IE5+,Mozila,NS6 and may not NS4 or lowers.

Supports Hotkeys, command buttons or command links

It happens sometimes that the size of characters and numbers written in a webpage can be so small for people with eye disease. So they call the webmaster asking to use a bigger font to display any information. On the other hand, people using different display resolutions, want to display a smaller text so that the information is totally included in the video area, since they think that scrolling bars are annoying. This script can avoid a big headcache to the web content editors! Users will be free to adjust font and image sizes just clicking on a button or hitting an appropriate hotkey on the keyboard.


or click here

Increase - Decrease


press + / - keys on your keyboard

Usage and configuration
You need to follow some simple steps to add this feature to your pages
1. include the script adding something like
    <SCRIPT LANGUAGE="Javascript" SRC="magnifier.js">
    to your HTML page, after <HEAD> tag and before its ending </HEAD>

2. "font level" resize will be made in the following situations:
    - text included between <FONT ..> and </FONT> tags, no matter if
    a style attribute is declared, or a class attribute, or a size one
    - text included in a tag with a style attribute that sets the font-size
    property, i.e. < ... STYLE="font-size: 16pt">
    - text included in a tag with a class attribute that defines font-sizes in a css file
    Use proper tags to "mark" text to resize

3. "window level" (IE only) resize will be made on entire page using ">" and "<"
    keys (you can change them, using key generator html page included)

4. add two buttons or links to call increase and decrease functions; for example:
    <A HREF="javascript:increaseFontSize();">Increase</A>
    <A HREF="javascript:decreaseFontSize();">Decrease</A>
    Of course you can use images, form buttons, and so on.

5. (optional) give the desired values to parameters inside the scripts to customize the script behaviour

That's it! Now you are ready to magnify your text.

Tests and compatibility
Each browser supporting styles and a standard Javascript1.1 DOM implementation can run magnifier script. While only browsers supporting object will be able to execute zoom script. However if you find these scripts do not work with your browser, please let me know as soon as possible.

- If you try the script in this page (clicking on the buttons above), you will notice that the text at the beginning wont be resized. This happens because of the !important command included while declaring the style. Look at the source code of styles.css file. You will find something like

.noresize { 
 font-family: Verdana, Arial, sans-serif; 
 font-size: 12px !important; 
 color: #333333; 
 font-weight: normal;

Using it, you can mark class styles or pieces of text telling the script not to override your original font settings. In this example, all tags declared with a "noresize" class, will preserve their starting configuration.

- Pressing "+" (plus) and "-" (minus) keys usually on the right in your keypad, you will obtain the same effect as clicking on the buttons/links above. This feature can be customized entering the desired keycodes in the configuration parameters. See the script for further details.

- Thanks to cookies support, your browser can remember your font size while browsing the website, so you don't need to adjust size for each page! Try to increase font size for this page and then click here. To add this feature you will need to add an "onload" event capture to <BODY> tag:

<BODY onLoad="changeFontSize(0, 0, true);">

The third parameter, set to TRUE, just tells the script to use size values stored in the cookie.

Version 0.97
Fixed the Document Object Model inspection, since Internet Explorer uses a different implementation for the current style associated with a specific tag. This caused a "default start size" resize for each tag in the page, despite of its original size. Made some optimizations for shorter execution and more secure checks.

Version 0.96
Fixed a bug under Netscape 4.x which gave an error since document.body object is not defined. Now the script checks if this object has some property and executes the resize function in a safe way.

Version 0.95
New experimental support to store font size choosen by the user in a cookie. Each page will be resized during its load; you can enable or disable this function for all pages of your site.

Version 0.94
Merged magnifier.js with zoom.js written by Nguyen Duong Minh, and added the possibility to resize font by pressing some appropriate hot-key (see Hints section for details). Now you can handle two types of resize: a "font level" and a "window level" one.

Version 0.93
Fixed a bug which crashed the script execution if HTML code contained a comment line

Version 0.92
Rewritten code of magnifier.js for compatibility with Mozilla and other browsers. Previous version used document.all object to get all text nodes to modify. But this object is not available in Mozilla or compatible javascript engines, so a custom function was developed to cross the node tree (with body as root node) and modify attributes of each node

Version 0.91
Added zoom.js script written by Nguyen Duong Minh (Obie) - This script enables IE users to use hotkeys and zoom in and out the window of browser. Unfortunately this script uses a non standard feature of javascript document object model, so that other browsers cannot execute it correctly

Version 0.90
Initial version