Search code examples
javascriptjquerymulti-touchgestureshammer.js

JS that should listen for pinch in and pinch out not working

I am trying to execute a function on pinch in of the body and then another function on pinch out. Since i'm already using jquery.hammer.js in this document and hammer can listen for in and out pinches, I thought it would be best to use it to listen for the pinches. But, instead of running the functions, I would just run alerts instead for now.

This seems like it should work, but when I pinch in and pinch out, the alerts are not fired.

What am I doing wrong?

Here is my code:

<!Doctype HTMl>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pinch me!</title>
    </head>
    <body>

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="//raw.github.com/EightMedia/hammer.js/master/dist/jquery.hammer.min.js"></script>
        <script type="text/javascript">
        var element = $('body').get();
        var hammertime = Hammer(element).on("pinchin", function(event) {
            alert("pinch in!");
        });
        var hammertimes = Hammer(element).on("pinchout", function(event) {
            alert("pinch out!");
        });
        </script>
    </body>
</html>

I would greatly appreciate any help in getting these alerts to fire on pinch in and out.

Solution

  • I think your script is just malformed? .get() is for making Ajax calls. To select an element, you just wrap it in the jQuery selector.

    Try setting element like this -

    var element = $('body');

    It's not clear to me why you're binding the pinch events to variables in this simple example either, but it shouldn't stop it from working.