Make the Drawer open when switching to small screen

Question

I trying to use Material Design Lite and made a small interface. And now I face with a problem - I need to make the Drawer always open, when window loads and when window goes from large screen to small. By default, the Drawer always starts with close state...

I found that some changes comes, when I hit Drawer button (pink color on screenshot).

I tried to use QuerySelector like that:

var obfuscator = document.querySelector('.mdl-layout__obfuscator');
obfuscator.className = 'mdl-layout__obfuscator is-visible'

but it cant detect that element... Can someone gimme better way to do such simple task?)) I really stacked with it...

You can detect for window onload & resize events and trigger open the drawer as mentioned in http://stackoverflow.com/questions/31536467/how-to-hide-drawer-upon-user-click — Apoorv Saxena, Jun 06 '16 at 20:41

score 0 · Accepted Answer · answered Jun 28 '16 at 12:49

Based on link, that Cody gave in the comment, I got that.

    window.onload = function() {
        var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
        if (w <= 1000) {
            document.querySelector('.mdl-layout__obfuscator').classList.add('is-visible');
            document.querySelector('.mdl-layout__drawer').classList.add('is-visible');
        };
    };

So now Drawer start opened when screen size below or equal 1000px. My first mistake was that I missed that material.js loads up with defer and because of that I cant find mdl-layout__obfuscator and mdl-layout__drawer. Like always, stupid mistakes made pain in... u know that place :)

Make the Drawer open when switching to small screen

1 Answers1