examples/no-jquery.html

<!DOCTYPE html>
<html>
<head>
    <title>Hammer.js</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <style>

        @keyframes highlight {
            0%{ background: rgba(255, 240, 140, 1); }
            100%{ background: rgba(255, 240, 140, 0); }
        }
        @-moz-keyframes highlight{
            0%{ background: rgba(255, 240, 140, 1); }
            100%{ background: rgba(255, 240, 140, 0); }
        }
        @-webkit-keyframes highlight{
            0%{ background: rgba(255, 240, 140, 1); }
            100%{ background: rgba(255, 240, 140, 0); }
        }


        body { padding: 0; }

        #container {
            padding: 20px;
        }

        .highlight {
            background: #fff68d;
        }

        .hero-unit {
            padding: 0;
        }

        #toucharea {
            padding: 30px;
        }

    </style>
</head>
<body>


<div id="container">
    <div class="page-header">
    <h1>jquery.hammer.js without jquery, for save full loading</h1>
    </div>

    <div class="hero-unit">
        <div id="toucharea">
            <h1>Touch me</h1>
            <p>The tap event will be fired. Notice in the sourcecode that event delegation is also supported.<br>
            In the console you can see the event data.</p>
            <h4>List items with stopPropagation</h4>
            <ul id="items">
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4</li>
                <li>List item 5</li>
            </ul>
            <p>
                <a href="#" id="add-list-item" class="btn btn-success">Add list item</a>
            </p>    
        </div>
    </div>


</div>

<script src="../dist/jquery.hammer.js"></script>

<script>

    function highlight(el) {
        setTimeout(function() {
            el.className = el.className.replace("highlight", "");
        }, 100);
        el.className = el.className + " highlight";
    }

    var hammertime = Hammer(document.getElementById("toucharea"));
    console.log(hammertime);

    // the whole area
    hammertime.on("tap swipeleft drag", function(ev) {
        if(window.console) { console.log(ev); }
        highlight(this);
    });

    // on elements in the toucharea, with a stopPropagation
    hammertime.on("tap swipe", function(ev) {
        if(window.console) { console.log('nested', ev); }
        highlight(this);
        ev.stopPropagation();
    });

</script>
<script src="assets/js/ga.js"></script>
</body>
</html>