Swipe in the middle to open panel with jQuery Mobile?

Question

I have a small bars button in my nav header that opens the panel when clicked, but how do I make it so that when I swipe to the right from the middle of the app, it opens the left panel? You can see this on many native apps including Facebook. Thanks for any help!

Answer 1

I think this is what you'll want (you may want to refine your selector for your swipe area) -

$('body').on('swiperight', function () {
    $('#defaultpanel').panel('open', '');
});

$('body').on('swipeleft', function () {
    $('#defaultpanel').panel('close');
});

jsFiddle Demo

Answer 2

Listen to swipe events swipeleft and swiperight and accordingly, open panels $('#id').panel('open').

Demo

$(document).on('swipeleft swiperight', function (e) {
  if (e.type == 'swiperight') {
    $('#left').panel('open');
  }
  if (e.type == 'swipeleft') {
    $('#right').panel('open');
  }
});

Answer 3

$( document ).on( "pageinit", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", 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 ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    }); });

here is the documentation: http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php#&ui-state=dialog