Wipe menu

Jun 11, 2015 at 2:04 PM

i become desperate in combining the sidr menu with the wipe-functionality of the jquery.wipetouch.js class.
What i want is that:

-when the user wipes AT THE DOCUMENT (not at a single div element) from left to right --> sidr menu has to be displayed (at left)
-when the user wipes from left to right --> sidr menu has to remove
-when the user clicks at the document, nothing shall happen

Here is my code (which displays the menu on wipe and even if the user clicks on the background):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
#mobile-header {
    display: none;
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="js/sidr/stylesheets/jquery.sidr.dark.css">

<div id="sidr">
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
<div id="content">
   <p>I'm the start screen!</p>

<script src="js/sidr/jquery.sidr.min.js"></script>
<script src="js/jquery.wipetouch.js"></script>

$(document).ready(function() {
                    wipeLeft: function(result) { $.sidr('close', 'sidr'); },
                    wipeRight: function(result) { $.sidr('open', 'sidr'); }
    $(document).click(function() { 
        //do nothing!

I hope somebody does no sidr and can help me... (http://www.berriart.com/sidr/)

Any help is appreciated.