I have created web page for toch device using Bootsrap and jQuery mobile.
Page contain one carousal in middle of page which slide left/right as per swipe done by user. Page contain Jquery Mobile panel which open only if user swipe right.
My problem is if user swipe right on carousal, Panel opens automatically. I want when user swipe right at edge of right side(around 75px) then only Panel must open.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bxxloder and JQM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.1.min.css">
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
<script src="jqm/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<!--#########################JQM#########################-->
<div class="container-fluid" id="demo-page" data-url="demo-page">
<div data-role="panel" id="left-panel" data-theme="b">
<p>Left reveal panel.</p>
<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>
</div><!-- /panel -->
<div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b">
<p>Right push panel.</p>
<a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>
</div><!-- /panel -->
<!--#########################//JQM#########################-->
<!--#########################Bx slider#########################-->
<section class="row col-lg-10" style="float: none; margin: 0 auto;">
<ul class="bxslider">
<li><img src="image/b.png" title="Funky roots" /></li>
<li><img src="image/b.png" title="The long and winding road" /></li>
<li><img src="image/b.png" title="Happy trees" /></li>
</ul>
</section>
<!--######################### End Swipe Carousel ##############################-->
</div>
<script>
$(document).ready(function()
{
$('.bxslider').bxSlider(
{
mode: 'horizontal',
captions: true,
auto: true,
touchEnabled: true,
oneToOneTouch: true,
/* controls: false,*/
pager: false,
speed: 200
});
});
</script>
<script>
$(document).on("pagecreate", function()
{
$(document).on("swipe", function(e)
{
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
//if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" )
if($(".ui-page-active").jqmData("panel") !== "open" && !$(e.target).hasClass("bxslider"))
{
if(e.type === "swipe")
{
$("#right-panel").panel("open");
}
else if(e.type === "swipe")
{
$("#left-panel").panel("open");
}
}
});
});
</script>
</body>
</html>
In the first if statement add another condition that the element which received the swipe isn't wrapped by slider.
$(document).on("swipe", function (e) {
if ($(".ui-page-active").jqmData("panel") !== "open" && $(e.target).closest(".bxslider").length === 0) {
/* code */
}
});