Wipe menu

Jun 11, 2015 at 2:04 PM
Hi,

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WipeTouchDemo</title>
<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="js/sidr/stylesheets/jquery.sidr.dark.css">
</head>

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

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

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

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

Any help is appreciated.