Needed - Javascript button to utilise Ctrl + and - keyboard shortcuts in web browsers

Question

I am trying to create a button on a web page to increase the page size, font size image size etc. This is for a Special needs school website in order to make it more accessible. website is www.applefieldsschool.co.uk. Please note it is a work in progress.

So far I have managed to come up with this;-

<button onclick="body.style.zoom='300%'">Zoom 300%</button>

This works but simply magnifies what is rendered on the page and is not responsive. My page is HTML5 and CSS3 responsive to different viewport sizes etc.

If I use the keyboard shortcut Ctrl+ and Ctrl- This does exactly what I need. I now need to program a button to utilise the keyboard shortcut.

Sadly this is getting a little beyond my javascript skills (which I have only just, in the last week, started to play with) Thanks in advance.

Answer 1

It's not possible to tell your browser to 'Use the CTRL + + keys'.

Here is another thread which lists some possible alternatives. In particular:

body {
   transform: scale(1.1);
   transform-origin: 10% 10%;
   // add prefixed versions too.
}

You can also set the font-size. Unless you did all your sizes in em, which is relative to the font size, this won't really zoom the page as such, but it will (obviously( change the size of the font (which may still be acceptable for you).

Answer 2

You can try this:

var value = event.keyCode;

Call it from onkeydown="keyCode(event);"

And here is the list of keycodes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 3

I guess the zooming is browser specific (please corret me if i'am wrong) I'd recommend to add multiple styles, that you append on the website and define by your self.

for example, some CSS

/*default -no styles*/
body
{
   font-size: 14px;
}

body.big
{
   font-size: 20px;
}

body.omg
{
   font-size: 25px;
}

body.omg img
{
    width: 150%;
}

The pain with this is, that only the text will be scaled up. You will have to adress certain items to make them appear bigger. Like the <img> in the example.

Then you can address the styles on button click (you should maybe use something like jQuery to make this more clean...)

<button onClick="document.getElementsByTagName('body')[0].className ='big';">+ Zoom</button> 

<button onClick="document.getElementsByTagName('body')[0].className ='omg';">++ Zoom</button> 

Update here in an working example, using jQuery: http://jsfiddle.net/9DCry/