jQuery keyboard shortcut by clickevent

Question

I would like to have a button on my site which simulates CTRL + + (zoom-in). So I need to create 2 keypresses or something. I have the folowing which fires 1 keypress:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function simulateKeyPress(character) {
        jQuery.event.trigger({ type: 'keypress', which: character.charCodeAt(0) });
    }

    function pressCtrlPlus() {
        simulateKeyPress("=");
    }

    $(function () {
        $('body').keypress(function (e) {
            alert(e.which);
        });
    });
</script>

<input type="button" value="Ctrl +" ONCLICK="pressCtrlPlus();">

</body>
</html>

Does somebody know how to create a CTRL + + event by clicking on a button?

Possible duplicate of: http://stackoverflow.com/questions/2445613/how-can-i-check-if-key-is-pressed-during-click-event-with-jquery — mVChr, Jan 29 '11 at 17:52
possible duplicate of [triggering browser Zoom-in and Zoom-out funtions](http://stackoverflow.com/questions/4539955) and [others](http://stackoverflow.com/search?q=javascript+zoom+in). Please search before you post. — Matt Ball, Jan 29 '11 at 18:38
possible duplicate of [triggering browser Zoom-in and Zoom-out funtions](http://stackoverflow.com/questions/4539955/triggering-browser-zoom-in-and-zoom-out-funtions) — Michael Mrozek, Jan 30 '11 at 01:53
Unfortunately all the above solutions will not solve my problem. I need te emulate CTRL+. This is because when you zoom in on a page using zoomlevels of divs and so on, the page falls out of the window i.o.o. zooming using CTRL+ — Colin, Jan 31 '11 at 08:56

score 1 · Answer 1 · edited May 23 '17 at 09:58

According to this topic SO: Calling keyevent from mouse I created the following test:

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function zoomin(zlevel) {
        var _body = parent.parent.document.body;

        if (jQuery.browser.msie) {
            _body.style.zoom = zlevel;              
        }
        else
        {
            if (typeof _body.style.MozTransform == "string")    
                _body.style.MozTransform = "scale(" + (zlevel) + ")";
            else if (typeof _body.style.zoom == "string")
                _body.style.zoom = (zlevel*100) + "%";              
        }
    }
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<input type="button" value="Ctrl0" ONCLICK="zoomin(1.0);">
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);">
<input type="button"  value="Ctrl++" ONCLICK="zoomin(1.3);">
</body>
</html>

But it still acts weird. I haven't seen any solution yet, which acts like zooming by using keyboard shortcut CTRL + +. Can't this be done?

score 0 · Answer 2 · answered Feb 01 '11 at 08:17

In order to keep zoomin functioning you need to remember the current zoomlevel.

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <title>Stackoverflow</title>
</head>
<body>
<script type="text/javascript">
    function zoomin(zlevel) {
        zlevel = $('#zlevel').val() * zlevel;
        $('#zlevel').val(zlevel);

        var _body = parent.parent.document.body;

        if (jQuery.browser.msie) {
            _body.style.zoom = zlevel;              
        }
        else
        {
            if (typeof _body.style.MozTransform == "string")    
                _body.style.MozTransform = "scale(" + (zlevel) + ")";
            else if (typeof _body.style.zoom == "string")
                _body.style.zoom = (zlevel*100) + "%";              
        }
    }
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<input type="button" value="Ctrl0" ONCLICK="zoomin(0.9);">
<input type="button" value="Ctrl+" ONCLICK="zoomin(1.15);">
<input type="button"  value="Ctrl++" ONCLICK="zoomin(1.3);">
<input type="hidden" value="1" id="zlevel">
</body>
</html>

jQuery keyboard shortcut by clickevent

2 Answers2