Thursday, August 07, 2008

Javascript Magnification on your Website.


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.

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.

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 th ree main limitations:-
  • Javascript must be switc hed 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 bea 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.

How to Set the Magnifier Up.

  1. Set-up an extern al 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 an

    d 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 sh

    ow 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 be low to any page you wish to have the zoom function on.

3.Also change the tag to


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:-

Posted by at
Labels:
Subscribe to: Posts (Atom)