|
Written by Dino Termini - termini@email.it - 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) - obie4web@yahoo.com - April 14, 2003 Portions of code by Webreference Javascript Cookie Functions Jupirmedia Corporation http://www.internet.com 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
Introduction
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 document.body.style.zoom 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. Hints - 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. History 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) - obie4web@yahoo.com. 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 |