Javascript Magnification on your Website.

Bristol Diabetes . Access
Note that: Microsoft's release of internet Explorer v7 in November 2006 has a built in zoom magnifier so in the long run the zoom magnifier will be of use to fewer and fewer visitors.

Zoom Magnifier Introduction.

This page gives some simple instructions on how to set-up a Javascript zoom magnification function on a web site. So if you have a web site and a basic knowledge of html web pages read on.

Be aware though that not all visitors will have this function. My rough estimate is that in November 2006, about 2 in 10 of any human visitors will NOT see it.

Peter Frost

Javascript Zoom Magnifier in Action.

Like to see the zoom magnify function in action, click the +10% or -10% button in the top left of the page. Can't see them? That means your not running Internet Explorer or have Javascript turned off.

For anyone with a web site this is a useful utility to allow most visitors to easily change the text and graphic size in a single click.

The Zoom Magnifier is Freeware.

The Javascript code on the 'zoom.js' link and its 3 variants is free for any use.

Magnifying Limitations.

To use the magnifier, there are three main limitations:-
  • Javascript must be switched on.
  • It only works for the Internet Explorer Browser version 5,6 or 7 must be used.
  • If Cookies are blocked, the zoom factor is not remembered and page magnification has to be set for each page viewed.
It degrades gracefully, so simply no buttons appear if Javascript is switched off or a non Microsoft browser is used.

Opera is an exception as the Opera browser has an option to 'pretend' to be a Microsoft browser. With Opera if this option is used the buttons will be visible but will not work, full marks to Opera!?

Overhead and Size of Script.

On slow PC's using cookies to remember magnification you may notice a 're-size' effect, as the text expands after the page loads. Not a problem on newer PC's but a minor irritation on very large pages viewed by slow PC's.

Script size shouldn't be a problem even on dial-up. One script file of about 2k is needed in an external javascript file 'zoom.js' file, with two lines on each page using the zoom utility.

Zoom Effect on Text.

Text size can be increased with out losing quality, the browser simply redefines the font size.

Zoom Effect on Graphics.

Unlike mere font size changes, graphics will blow up larger but gradually lose quality.

How to Set the Magnifier Up.

  1. Set-up an external Javascript file 'zoom.js'. Start by opening a text editor like notepad. Click below to see the file :-

    zoom.js.

    Then high light all the text and copy and paste into notepad. Use File-> Save As zoom.js and save in the same directory where you hold your htm or html pages. Saving as a text file.

    N.B. My file statistics still show some of you save these files directly. If it works fine but I recommend the cut and paste approach into a blank notepad file, then use save as 'zoom.js'.

  2. Add the line of code below to any page you wish to have the zoom function on.

    <script language="JavaScript" src="zoom.js" type="text/javascript"></script>

    This should be between the <head> & </head> tags, just before the </head> tag is a good place.

  3. Also change the <body> tag to

    <body onLoad="zoomOnLoad();">

Note the buttons 'float' to the top left and right of the screen which may not suit the design of your site! If you have knowledge of javascript and html the code is fairly easy to change.

Or here are three minor variations:-

Valid HTML 4.01!   Valid CSS!