title: Hammer.js - Swipe in an off canvas element?
body: <p>I'm using the plugin <a href="http://cloudfour.github.io/offCanvasMenu/" rel="nofollow">offCanvasMenu</a> to basically do what the plugin says.. hide and show an off canvas menu which works fine as a click event but I'm trying to integrate hammer.js so the menu will hide/show on a right swipe</p>
  
  <p>So I've got this:</p>
  
  <pre><code>(function() {
      jQuery(function() {
          var $, configureMenus, menu, menuTrigger;
  
          $ = jQuery;
          menuTrigger = $('#menu-trigger');
          menu = $.offCanvasMenu({
              direction: 'right',
              coverage: '85%'
          });
          (configureMenus = function(display) {
              switch (display) {
                  case 'block':
                  menu.on();
                  break;
                  case 'none':
                  menu.off();
                  break;
                  default:
                  return;
              }
          })(menuTrigger.css('display'));
          menuTrigger.csswatch({
              props: 'display'
          }).on('css-change', function(event, change) {
              return configureMenus(change.display);
          });
      });
  }).call(this);
  </code></pre>
  
  <p>I thought pasting the above into the following would have worked?</p>
  
  <pre><code>window.addEventListener('load', function() { 
      var element = document.getElementById('body');
      var hammertime = Hammer(element).on("swipe", function(event) {
          //here
      })
  }, false);
  </code></pre>
  
  <p>But I haven't been able to call it in correctly, just wondering if anyone knows how to do this?</p>
  
  <p>If it helps the basic markup is something like</p>
  
  <pre><code>&lt;body id="body"&gt;
      &lt;div id="menu-trigger" class="panel-arrow right"&gt;&lt;a href="#menu"&gt;click me&lt;/a&gt;&lt;/div&gt;
  
      &lt;div id="menu" class="right-panel panel"&gt;
          &lt;p&gt;off canvas menu&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks!</p>