How to hide drawer upon user click

How to hide drawer upon user click

How do I hide the drawer when the user clicks on an item? Or when a button is clicked?

          Title            
  

How do I do it that when the button is clicked, the drawer will be hidden as if I clicked outside of the drawer? I tried simulating a click event outside of the drawer but it still does not hide.

Answer by jdepypere for How to hide drawer upon user click

I believe you can remove the is-visible class from .mdl-layout__drawer. I tried modifying a codepen example from their site: demo. My pure javascript event binding is rusty, but as I mentioned, you just need to remove the .is-visible class from the drawer.

Update

The code I provided was for v1.0.0 of mdl and is not actual anymore. Starting at v1.1.0 there is a public API provided for toggling the drawer, as described in Benjamin's answer. If you're between v1.0.6 and v1.1.0, have a look at idleherb's answer.

Answer by Yan Foto for How to hide drawer upon user click

Showing and hiding the menu is as easy as adding and removing the .is-visible class as it can be seen in the source:

MaterialLayout.prototype.drawerToggleHandler_ = function() {    'use strict';      this.drawer_.classList.toggle(this.CssClasses_.IS_DRAWER_OPEN);  };  

So you would have something like this:

function toggle_drawer() {    var drawer = document.getElementsByClassName('mdl-layout__drawer')[0];    drawer.classList.toggle("is-visible");  }  

I was hoping for a more convenient method of the MaterialLayout widget, but the best that I came up with was:

var layout = document.getElementsByClassName('mdl-layout')[0];  layout.MaterialLayout.drawerToggleHandler_();  

although this happens to be working, that _ at the end of the method name shows that this function is not supposed to be (mis)used as a public API method.

Answer by idleherb for How to hide drawer upon user click

For version 1.0.6, you have to remove the before mentioned class from two elements:

$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );  

Answer by user5738952 for How to hide drawer upon user click

I'm using this jquery command:

$( 'div[class^="mdl-layout__obfuscator"]' ).trigger( "click" );  

Answer by Benjamin for How to hide drawer upon user click

toggleDrawer is now a public function since @be54f78.

var layout = document.querySelector('.mdl-layout');  layout.MaterialLayout.toggleDrawer();  

Not currently available with v1.0.6, so you will need to build from source (as of today).

Answer by Mahmoud Zalt for How to hide drawer upon user click

Do this:

HTML

      Whatever      
            Home            About      
  
  

JS

    $('.mdl-navigation__link').on('click', function () {            // close the drawer the button is clicked          $('.mdl-layout__drawer').toggleClass('is-visible')      });  

CSS

/* prevent the dark transparent background over the page with the drawer is open */  .mdl-layout__obfuscator.is-visible{      background-color: transparent;  }  

Answer by MikeiLL for How to hide drawer upon user click

Based on GitHub discourse, I have a couple of working solutions to the (hopefully soon to be resolved) issue of having a MDL drawer close when link is clicked. At the moment I'm using:

function close() {    var d = document.querySelector('.mdl-layout');    d.MaterialLayout.toggleDrawer();  }    document.querySelector('.mdl-layout__drawer').addEventListener('click', close);  

Other variations are:

1.

document.querySelector('.mdl-layout__drawer').addEventListener('click', function () {    document.querySelector('.mdl-layout__obfuscator').classList.remove('is-visible');    this.classList.remove('is-visible');  }, false);  

2.

function close() {    var d = document.querySelector('.mdl-layout');    d.MaterialLayout.toggleDrawer();  }  var drawer_container = document.getElementsByClassName('mdl-layout')[0];  drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');  

Someone in the discussion mentioned the idea of targeting the querySelector so as not to require looking through the entire document and I came up with the following two variations:

3.

var drawer_container = document.getElementsByClassName('mdl-layout')[0];   # no IDs in the html code.  drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', function () {    var obfuscator = document.querySelector('.mdl-layout__obfuscator');    if (obfuscator.classList.contains('is-visible')) {      obfuscator.classList.remove('is-visible');      this.classList.remove('is-visible');    }  }, false);  

4.

function close() {    var d = document.getElementsByClassName('mdl-layout__container')[0].querySelector('.mdl-layout');    d.MaterialLayout.toggleDrawer();  }  var drawer_container = document.getElementsByClassName('mdl-layout')[0];  drawer_container.querySelector('.mdl-layout__drawer').addEventListener('click', 'close');  

In both of my versions the browser has to run document.getElementsByClassName as well as a targeted querySelector call.

In my first version there is also the check: classList.contains('is-visible') which someone had recommended, but which seems unnecessary as, the function is being called from an item that is only visible if classList.contains('is-visible') is true.

I added the following calls to each of my variations (#3 and 4), within the functions:

console.time("anonymous");  console.timeEnd("anonymous");  console.time("close function");  console.timeEnd("close function");  

And the one with the if statement runs in .39ms. Without the if statement they both run in .19ms. But I'm also not measuring the getElementsByClassName and querySelector methods that, if I understand correctly, are running on page load.

When I ran console.time("first"); and console.timeEnd("first"); through the first, and to me, prettiest code, the time was 23ms.

Apparently ie8, which I want to support, doesn't support getElementsByClassName.

I'm hoping someone can provide and explain an optimal solution to this relatively simple problem.

Here's a CodePen (not mine).

Answer by ChandRaja for How to hide drawer upon user click

Auto Hide the Navigation Drawer in Material Design Lite Framework.

Just include this code in the script tag of your web page

Must Include jQuery to get this run... :D

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72