2

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.

user3271150
  • 45
  • 6
  • 1
    [You may be interested in some UX insights on this](http://ux.stackexchange.com/questions/29294/should-i-have-a-text-size-widget-for-accessibility-on-a-charity-website/29304). Personally I believe it is far better to use the browser and operating systems' own font size controls: teach the user to do this once and they can apply this to all sites, without having to cognitively parse your site for the functionality that will work there and only there. – Barney Feb 17 '14 at 12:16
  • Good point, I have since found a number of other articles very similar. A111 Project seems to be the authority on accessibility on the web and they say not to bother. cheers for everyones help though – user3271150 Jul 16 '14 at 11:05

3 Answers3

2

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).

Community
  • 1
  • 1
Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146
0

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

Java_User
  • 1,303
  • 3
  • 27
  • 38
  • var 122 = event.keyCode; onkeydown="keyCode(event);" I am a real beginner with this so please forgive me. I have put it down something like this. It doesn't work can you guide me in the right direction. (please note I used keyCode 122 rather than trying to use 2 KeyCodes at the same time for testing(KeyCode 122 is F11- full screen) – user3271150 Feb 18 '14 at 13:51
0

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/

Nico O
  • 13,762
  • 9
  • 54
  • 69
  • The keyboard shortcut is the same across all major browsers. Looking into all possible options though cheers for the info. – user3271150 Feb 18 '14 at 13:08