Search code examples
javascriptmaterial-design-lite

Make the Drawer open when switching to small screen

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...

enter image description here

Solution

  • 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 :)