s.spirit s.spirit - 1 year ago 158
Javascript Question

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

Answer Source

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) {

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download