For implementing swipe support on my landing page carousel, I included jquery.mobile.custom.min.js.
However, I am facing a challenge with adding swipe support to "close" the menu. Essentially, swiping left should have the same effect as clicking the button.
Here is the relevant HTML:
<body>
<!-- sidebar -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<input type="checkbox" name="handler-left" class="handler" id="handler-left" onclick="null" />
<div id = "menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="portfolio.html#">Portfolio</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="wrapper">
<p id="button">
<label for="handler-left" id="left" href="#">Menu</label>
</p>
My attempt at the script:
$(document).ready(function() {
$("menu").swipeleft(function() {
$(this).parent().handler('left');
});
});
CSS for handler:
.handler {
display: none; }
#handler-left.handler:checked ~ #menu {
opacity: 1;
-webkit-transition: opacity 0s 0s;
-moz-transition: opacity 0s 0s; }
#handler-left.handler:checked ~ #wrapper {
-webkit-transform: translate3D(40%, 0, 0);
-moz-transform: translate3D(40%, 0, 0); }
#handler-left.handler:checked ~ #wrapper #content {
overflow: hidden; }
Progress update:
I have successfully detected a swipe on the entire document, now I need to figure out how to toggle the class.
$(document).ready(function() {
$(document).on("swipeleft",function(){
(".handler").??? }); });
UPDATE 2:
The solution has been found. Below is the piece of code that resolved the issue:
$(document).ready(function() {
$(document).on("swipeleft",function(){
document.getElementById('handler-left').click();
// alert("you swiped left!");
});
});