1

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>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Mike Phils
  • 3,475
  • 5
  • 24
  • 45

1 Answers1

2

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 */
  }
});

Demo

Omar
  • 32,302
  • 9
  • 69
  • 112
  • It work fine thanks lot!!!,but my panel is not coming at one touch in touch device, can we add some touch effect radius at right edges. – Mike Phils Nov 28 '14 at 22:14
  • @MikePhils you're welcome :) the panel isn't opening on swipe? can you explain the situation? – Omar Nov 28 '14 at 22:25
  • panel work fine is PC, but on mobile when i swipe right sometime it come sometime it don't. can we add some swipe effect area near right edges. – Mike Phils Nov 29 '14 at 06:59
  • 1
    @MikePhils I just tested the code in ipad, it's working as expected. You can increase/decrease swipe distance before swipe is triggered. http://stackoverflow.com/a/16523579/1771795 – Omar Nov 29 '14 at 07:27
  • used this and it work $.event.special.swipe.horizontalDistanceThreshold = (screen.availWidth) / 60; // (default: 30) (pixels) – Swipe horizontal displacement must be less than this. – Mike Phils Nov 29 '14 at 09:03
  • $.event.special.swipe.horizontalDistanceThreshold = (screen.availWidth) / 100; //changed 100 from 60, it is working.But not understood about (screen.availWidth) / 100; , could u please guide it – Mike Phils Nov 29 '14 at 09:05
  • http://stackoverflow.com/questions/27196139/jquery-code-which-check-the-internet-network-is-available-or-not-mobile-pc-tabl any idea about this. – Mike Phils Nov 29 '14 at 09:17