Tag Archives: TouchSwipe

jquery.hammer.js – Implement delegated swipe event for inner elements

This example make use of jquery.hammer.js for implementing delegated events for inner elements. Just like what we did in the TouchSwipe Example.

 

Continue reading jquery.hammer.js – Implement delegated swipe event for inner elements

Advertisements

Javascript – Implement touch and gesture based interaction using hammer.js

We have talked about TouchSwipe in previously.

 

Unlike TouchSwipe which is a jQuery plugin, hammer.js is independent of jQuery. It supports tap, swipe, drag and other mobile touch events. Here is an simple example.
Continue reading Javascript – Implement touch and gesture based interaction using hammer.js

TouchSwipe – Implement delegated swipe event for inner elements

In the previous post, we attach the swipe event listener directly on the #box element.

 

How about if your target elements is dynamically added to the DOM? In that case, the event listener would not work for the newly inserted inner elements. A work around is attached the event listener to the parent element instead. Here is another example for the delegated event implementation of TouchSwipe.
Continue reading TouchSwipe – Implement delegated swipe event for inner elements

jQuery – Implement touch and gesture based interaction using TouchSwipe

Here is an example for a simple swiping implementation using TouchSwipe.

<!doctype html>
<html>
<head>
  <title>Eureka! - TouchSwipe Example</title>
  <style type="text/css">
    #box {
      background-color: green;
      width: 400px;
      height: 225px;
      line-height: 225px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="box">Swipe here!</div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  <script type="text/javascript">
    $("#box").swipe({
      swipe: function(event, direction, distance, duration, fingerCount) {
        $(this).text("You swiped " + direction );
      }
    });  
  </script>
</body>
</html>

 

Done =)

Reference: TouchSwipe: a jQuery plugin for touch and gesture-based interaction