8

I'm using Material Design Lite to create a UI for an app in a web view however I have come across a problem where I can't deploy the navigation drawer on swipe.

I am using this jquery code to recognise the swipe event

  $(function() {      
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(this).text("Event Triggered" );  
        },
      });
    });

From here I'm not sure how to open up the navigation drawer. I would prefer to have the entire screen "swipeable" especially the left edge. How can I go about opening the navigation bar when this swipe handler is triggered?

Isaacm
  • 389
  • 5
  • 16

2 Answers2

0

I was trying to add this effect in the demo material design lite, http://www.getmdl.io/templates/dashboard/index.html. So the solution I found was to simulate the click event of the hamburger button, through the class "mdl-layout__drawer-button" that is generated by material design lite.

$(function() {      
    $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
            $(".mdl-layout__drawer-button").click();                        
        },
    });
});
Isaacm
  • 389
  • 5
  • 16
user3257770
  • 24
  • 1
  • 3
  • Could you please rewrite your answer to fit for the opener needs instead just coping some code of your own website. This will help the opener and other readers because they can understand what you mean. – bish Jul 13 '15 at 05:27
  • This solution works a treat, i've edited it to fit with the example I used in my original post. Thanks – Isaacm Jul 13 '15 at 09:47
  • How are you using swipe gestures with MDL? Loos like it doesn't support gestures out of the box. – mu3 May 14 '16 at 23:29
0

To open/close sidenav document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

Ivan Proskuryakov
  • 1,625
  • 2
  • 23
  • 32