trigger multiple keypress to stimulate keyboard shortcut jquery

Question

I want to create page zoom - according to keyboard shortcuts by jQuery. Mainly, I want to trigger Ctrl with + and Ctrl with - key pairs, when the user clicks on some element on the page. I have tried this code snippet from Way to trigger multiple keypress and hold events in jQuery question, but it does not work - it does not zoom the page

$("#zoom").click(function() {

    var e = $.Event("keydown");
    e.which = 61; // # key code for +
    e.ctrlKey = true;
    $(document).trigger(e);

});

@Kelvin Mackay It does seem to work fine, but it doesn't actually zoom in, like clicking ctrl + = does. at least in chrome — Farzher, Nov 18 '12 at 17:29

Kelvin · Answer 1 · 2012-11-18T17:56:46.870

Your event trigger seems to work just fine, according to my fiddle.

$(document).bind('keydown', function(e) {
    e.preventDefault();

    var d = new Date();
    $('#log').html(
        'time: ' + d.getTime() + '<br/>' +
        'key: ' + e.which + '<br/>' +
        'ctrl: ' + (e.ctrlKey ? 'Yes' : 'No')
    );
});

However, you seem to be asking how to control the browser's zoom level, which isn't possible in most (if any) browsers without a plugin.

You could implement zooming of your own using CSS and Javascript, and even use the above snippet to capture Ctrl + and Ctrl - but you wouldn't be able to prevent the user zooming the page in other ways.

CSS:

    .text-zoom-0{
        font-size: .75em;
    }
    .text-zoom-1{
        font-size: 1em;
    }
    .text-zoom-2{
        font-size: 1.25em;
    }

Javascript:

jQuery(function($) {
    var currentZoom = 1,
        minZoom = 0,
        maxZoom = 2,
        changeZoom = function(increase) {
            var newZoom = currentZoom;

            if (increase && currentZoom < maxZoom) {
                newZoom++;
                $('.text-zoom-' + currentZoom)
                    .addClass('.text-zoom-' + newZoom)
                    .removeClass('.text-zoom-' + currentZoom);
            } else if (currentZoom > minZoom) {
                newZoom--;
                $('.text-zoom-' + currentZoom)
                    .addClass('.text-zoom-' + newZoom)
                    .removeClass('.text-zoom-' + currentZoom);
            }

            currentZoom = newZoom;
        };

    $('.zoomIn').click(function(e) {
        changeZoom(true);
    });

    $('.zoomOut').click(function(e) {
        changeZoom(false);
    });
});

And of course you'd have to do the same for images, navigation, and every other element on the page. If you wanted to actually do this, you could be much more clever about the CSS than this little snippet, but remember, could is not the same as should by any stretch of the imagination...

This. Can you imagine the chaos if a random, untrusted website could mess with your display settings? — Sébastien Renauld, Nov 18 '12 at 17:30
yes it works, I mean there are no errors or smth, but it does not zoom the page what I want to achieve — dav, Nov 18 '12 at 17:34
@Davo As I said, controlling the browser's native zoom isn't possible. You could implement your own zoom functionality if you desire using CSS and Javascript. — Kelvin, Nov 18 '12 at 17:45

score 0 · Answer 2 · answered Nov 18 '12 at 17:18

0

You can use this librarie. there are a lot of examples

http://www.openjs.com/scripts/events/keyboard_shortcuts/

answered Nov 18 '12 at 17:18

mjimcua

2,781
3
27
47

2

He's trying to do the opposite of that. – Farzher Nov 18 '12 at 17:23

trigger multiple keypress to stimulate keyboard shortcut jquery

2 Answers2

Linked