Geek Answers Handbook

Use Javascript for CTRL + and CTRL- in Firefox and Chrome

I would like to give users the ability to increase / decrease the size of the content rendering inside the web application.

The CTRL + and CTRL - (or CTRL 1 through CTRL 9 ) functions are convenient for Chrome and Firefox - but is there a way to execute these JavaScript functions?

Explanation: I want the user to be able to achieve this with mouse clicks rather than keystrokes, so something like this:

function resize_rendering() { // code that executes ctrl+ or crtl- }
+4
source share
4 answers

The browser zoom level is a user parameter that exists for access purposes; it is not intended for the site developer to ever know or care about what level of scaling, so I expect that you will have problems with what you want. Of course, it will be difficult to make it work with a cross browser.

A common approach to this is to have a checkmark with dimensions that resizes the base font.

If all the font sizes on your site are in em units, you can resize all the text on the site with a single CSS change.

So, you will have a set of buttons on the site that use Javascript to set the font-size of the <body> element (for example) to 12, 14, 16 or 18 pixels depending on the click of the element.

The technique is described here: http://labnol.blogspot.com/2006/12/allow-site-visitors-to-change-font.html

+3
source

You are not allowed to design. You cannot change the user's browser setting through Javascript.

You can do other things, for example, modify all the CSS on your page to scale everything to mimic CTRL- , but that's it.

In some browsers, you can grab CTRL +/- before the browser does this, allowing you to stop these events. But you cannot make an opponent - you cannot trigger these events from your own script.

+1
source

This library here from John Resig is a jQuery plugin that should do the job. There are several samples. Its pretty easy to combine keyboard shortcuts.

0
source

You can intercept a keystroke in a public key event handler (for example, in a window object), check if it is looking for the one you are looking for, and if so, call stopPropagation() in the event parameter (and return false) so that the browser does not processed it yourself.

You will need to perform the calibration operation yourself, for example, by changing the stylesheet using JavaScript.

 window.addEventListener( 'keydown', function( e ) { if ( /* check e.keyCode etc. */ ) { // modify global style to increase/decrease font size e.stopPropagation(); return false; } );
0
source

More articles:


All Articles