CODEWITHSUNDEEP
javascriptjquery-mobilepanelswipe
Federico
Federico

Reputation: 6478

jQuery mobile responsive panel swipe open/close dismiss

The goal is to have a page with two panels (left-panel, right-panel) that open and close on swipe events, but also enable a responsive design (such that when the screen is large enough, the user can keep 1 panel open while using the page-contents).

I found good examples on the JQM sites: http://view.jquerymobile.com/1.3.1/dist/demos/examples/panels/panel-swipe-open.html http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/ (section on making the panel responsive)

I got really close. On a small screen, I can swipe open/close perfectly. On a large screen (where the panel is held and content is responsive), I can only swipe to close on the panel itself. If I swipe on the page contents, nothing happens. Testing the following code, I see that the swipe event is being called.

$( document ).on("swipeleft swiperight", "#index", function( e ) {
  console.log('swiped!!')
    // 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" );
      }
    }
  });

I have also been looking at the css code:

.ui-responsive-panel .ui-panel-dismiss-display-reveal {
    display: none;
}

(If I comment out display, it wont let me use the page contents on a large screen).

Upvotes: 3

Views: 8789

Answers (1)

Federico
Federico

Reputation: 6478

I figured the easiest way to fix this problem was to force close any open panels. After hours of searching, I just thought a little bit and came up with this modification:

$( document ).on("swipeleft swiperight", "#ticket", function( e ) {
  console.log('swiped!!')
    // 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" );
      }
    }
    else if ($.mobile.activePage.jqmData( "panel" ) == "open"){
      $( "#left-panel" ).panel( "close" );
      $( "#right-panel" ).panel( "close" );
    }
  });

All it does is close any panels on a swipe event if they are open.

Another tip about responsive panels -- make sure you are using the css class that corresponds to your panel option.

If you use reveal, the class is .ui-panel-dismiss-display-reveal If you use push, the class is .ui-panel-dismiss-display-push

Hope this helps someone out!

Upvotes: 3

Related Questions