Resize content when drawer is open in MDL - javascript

I'm building a website based on MDL. What I'm trying to achieve is that the drawer doesn't open over the content, but open next to it. I managed to disable the obfuscator and modify the top value.
However, the way I was going to do this is anytime the drawer opens the content area would get a 250px wide left margin (the drawer is 250px wide) and resize its width so that width: calc(100% - 250px). This works just fine, but I don't know if this is the best way to do it, and even if it is, I don't know how to track the state of the drawer.
Here's how the material.js handles the change:
MaterialLayout.prototype.screenSizeHandler_ = function () {
if (this.screenSizeMediaQuery_.matches) {
this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN);
} else {
this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN);
// Collapse drawer (if any) when moving to a large screen size.
if (this.drawer_) {
this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN);
}
}
};
This is beyond my skills to figure out what is actually going on. I tried tracking it down with Chrome, but it was too complicated.
Is there a trivial way to do this? If not, how do I edit the script?
Cheers!

The .mdl-layout__drawer receives a .is-visible class when it is open/visible.
This small CSS-Rule worked for me:
.mdl-layout__drawer.is-visible ~ .mdl-layout__content {
padding-left: 250px;
}
With this you also don't need to fix the width of the content-area, as you are not using margin but padding. Note that by default the material.css also disables scrolling when the drawer is visible, so you also need to add the overflow-property to the rule:
.mdl-layout__drawer.is-visible ~ .mdl-layout__content {
overflow: auto !important;
padding-left: 250px;
}

Related

Disable scrolling when pop up open and menu not showing on mobile

thanks for looking into my issue
I am creating a website: http://testgod0312.000webhostapp.com/ , all the css are separate by blocks so that it is easier for you to potentially help me (in assets folder).
when you go to map and click on a button, a pop up shows up, but you can keep on scrolling. The button is only coded in css (no js), everything in the map.css file - any idea how to disable overflow without resorting to js? if using js, what would you do as there is no function capturing the opening / closing of the box?
I have a menu (click top right corner), works fine on laptop but on mobile, it shows only 50% of it. The code is in nav.css; with the responsive at the bottom. Any idea on how to display it all?
thanks in advance!!
fafa
#1 can't be solved without javascript as long as browsers are not supporting css:has(). So the only way is to apply a class or a style="overflow: none;" to the body as soon as a popup gets opened and remove it after it was closed. The very same happens already if the menu is opened/closed.
A very small code snippet would be enough:
window.addEventListener("hashchange",
() => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup'))
);
and CSS
body.popup-open {
overflow: none;
}
About #2 inside the nav.css the values applied before the media query (#media all and (max-width: 767px) {) cause the issue.
The menu__right changes from flex to none on small screens. And menu__left still has the right 50% value applied for bigger screens, So adjusting this value inside the media query to 0% solves it.
.menu__left {
right: 0%;
width: 100%;
}

Alternative to side slider animated by position

I am using a div that slides out when you click on it.
Here are some images of what I am trying to achieve:
This is the Div, collapsed by default
This is the Div after it is slid out (highlighted)
This is what happens after screen size is changed. The clickable div is present behind content Which I wish to avoid.
My Div's CSS:
.sliderDiv {
z-index: -10;
position: relative;
left: 200px;
width: 240px;
}
I use this command to slide it out on click:
slideItOut:function(){
var divsize=$(".sliderDiv").offset().left-150;
if(divsize>100){
$(".sliderDiv").animate({
"left":"-=194px"
},"slow");
}
else{
$(".sliderDiv").animate({
"left":"+=194px"
},"slow");
}
}
The problem is when you resize, it is not responsive at all and the div actually hides behind other content. Maybe this method is not supposed to be responsive.
Is there a way to make the same "slider" responsive or atleast hold its position while the screen size is changed?
I want to know of any way in which I could resize my window or screen and the div remains in same area as the 1st two images.
Also, this is being implemented in a modal. So its not exactly in a fixed area of the screen.
It won't solve without your full source code, I think. You should give its source code or put somewhere. Then, I try to fix. Or, I can offer optimum way

How to prevent swipe after an element has been repositioned by a transition

I've created a hidden sidebar navigation menu which, when made visible - moves the site-wrap (main content of the page) to the right to expose the menu:
.nav-trigger:checked + label, .nav-trigger:checked ~ .site-wrap {
left: 16.5em;
}
This all works as I would hope, but the problem is one that arises on mobile, when the user begins trying to swipe around the page. If you touch the left edge of the site wrap and drag it to the left, it scrolls the page in that direction - as if it was dragging the site wrap back across the navigation element behind it.
I have tried adding two variations of overflow hidden to body, but this has no effect:
body{
background: #bodyColor;
color: #headerColor;
font-family: #openSans;
font-size: 16px;
overflow-x: hidden;
overflow: hidden;
}
I did add the following jquery which prevented touch gestures entirely:
var touchDisabled = false;
$("#nav-trigger").click(function(){
if( touchDisabled == false ){
$(document).bind('touchmove', function(e) {
e.preventDefault();
});
touchDisabled = true;
}else{
$(document).unbind('touchmove');
touchDisabled = false;
}
});
but this is not the ideal situation as I'd like to retain vertical scroll if possible, and prevent horizontal scroll/swipe/drag/whatever-you-want-to-call-it.
Part of the reason I'm struggling to solve this is because I'm not entirely sure what to search for, it doesn't seem to be a scroll in the traditional sense, more dragging the div around the page.
The link to demonstrate the problem is:
http://streeten-new.streeten.co.uk/
(obviously only recreatable on mobile). I hope this helps to illustrate the problem as it's not the easiest of things for me to explain in words.
* 12/08 update *
Still having this problem unfortunately.
The problem also manifests itself in both the site-wrap and the .navigation scrolling at the same time as you swipe up on mobile. I would like to be able to tell site-wrap to just stay in place and don't move an inch, no matter how you swipe, and just allow vertical scroll/swipe in the navigation menu.
I've made it so that when you open the menu, overflow: hidden is being added to body and overflow: auto is being added to the navigation. This works perfectly on desktop! When you scroll, only the nav moves and the body is completely frozen. But on mobile it seems to have absolutely no effect.
$("#hamburger").click(toggleMenu);
var menuOpen = false;
function toggleMenu(){
$(".site-wrap, header").toggleClass("slideRight");
$(".navCover").toggleClass("slideRight");
$("#logo").toggleClass("slideLeft");
$("body, #fouc").toggleClass("preventScroll");
$(".navigation").toggleClass("allowScroll");
window.setTimeout(function(){
$("header button").toggleClass("slideLeft");
}, 250);
if (menuOpen == true){
menuOpen = false;
}else{
menuOpen = true;
}
}
.preventScroll{
overflow: hidden;
}
.allowScroll{
overflow: auto;
}
Any help much appreciated.
I have now (mostly) resolved this. I think the edit I made is another issue which I will raise separately.
For the benefit of others who may read this, in order to prevent the site-wrap container from being "swipeable" for want of a better word - whereby it was possible to drag it around the screen in every direction after it had been repositioned on opening the navigation menu - I had to use overflow: hidden
I had initially tried this, but where I went wrong was applying it to the body, which according to this thread doesn't work on mobile:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
I added another div within body, containing all my content and applied overflow: hidden to both body and this new div (belt and braces), which then resolved the issue.
Now when the site-wrap has been shifted to the right after clicking the hamburger icon, it is impossible to drag/swipe it around the screen on mobile.

div (menu) not pushing div (maincontent)

For a website i'm making I have a little problem. I have a mobile menu which activates when I press the menu button (done with javascript).
I want it to push the div with the 3 blocks (the maincontent div) down, but sadly it's not doing what it's supposed to.
I have tried everything with positions and so on, without success. You can check out the website at dev.hotelkom.nl
It's not working because your main menu is positioned absolutely and its parent has a fixed height. Also your wrapper-content is positioned absolutely hence it's not moving.
Few reasons how you may fix it:
.mainmenu {
position: relative;
height: auto;
}
.wrapper-content {
position:relative;
}
Apply these properties on mobile.

Detect overflow when overflow set to hidden

I have an interesting problem.
Background: I have a simple header. A logo and two links are floated on the left side, while two drop down menu links are floated on the right, all contained in a header div that i 100% width. If I shrink the screen horizontally enough the two drop down menu links dropped below the left-floated elements (of course). After doing some research I decided to use overflow: hidden on the parent header div so that the two drop-down menus would disappear instead of dropping to the next line. This solution works great in my situation. However, I found that the drop-down menu layer was cut off below the header because of the overflow:hidden solution. Just for reference, my drop down menu was created using simple javascript that toggles between css classes to get the drop down effect. I simply added a line to the function onclick events in the javascript that when a menu link is clicked on, overflow changes from overflow:hidden to overflow: none (and of course toggles back to hidden when the menu is unclicked), which works great because there is supposed to never be overflow if the menu buttons are visible (they disappear and are hidden when there is overflow,).
Problem: If a user opens a menu (aka clicks on a drop down menu link) and THEN shrinks the horizontal scrollbar without first closing the menu, the header has an overflow that is still set to none because the user hasn't toggled the header back to hidden because the menu is still open. Thus, my original problem of the two menu links dropping beneath the floated left divs again. Working with what I'm already doing, I'm trying to come up with some kind of onchange() event in the header that will detect when there is overflow, even though overflow is set to hidden. Any thoughts?
Relevant CSS Code:
.level1raise { //header class
background: #F8F8F8;
margin: 0px;
border-bottom: 1px solid #BCD2EE;
height: 55px;
overflow: hidden;
}
.level1drop { //alternate header class
background: #F8F8F8;
margin: 0px;
border-bottom: 1px solid #BCD2EE;
height: 55px;
overflow: none;
}
Sample of Javascript that toggles menu:
function supportdrop() {
if (document.getElementById("support").className == "hidesupportmenu") {
document.getElementById("support").className = "showsupportmenu";
document.getElementById("supportdrop").className = "supportmenuheadclicked";
document.getElementById("supportarrow").className = "uparrowimage";
document.getElementById("help").className = "hidehelpmenu";
document.getElementById("helpdrop").className = "helpmenuhead";
document.getElementById("helparrow").className = "downarrowimage"; //^THESE DEAL WITH MENU
document.getElementById("level1").className = "level1drop"; //THIS IS THE HEADER TOGGLE
} else if (document.getElementById("support").className == "showsupportmenu") {
document.getElementById("support").className = "hidesupportmenu";
document.getElementById("supportdrop").className = "supportmenuhead";
document.getElementById("supportarrow").className = "downarrowimage"; //^MENU
document.getElementById("level1").className = "level1raise"; //HEADER TOGGLE
}
}
If you need me to post more code I will, but I think what I've included kind of shows what I'm doing, let me know otherwise. I'd post an attempted solution, but I'm not really sure what solution to attempt. I'm trying to avoid JQuery. Thanks!
I came up with a solution for any others who are attempting a similar path. Because (1) I use 100% width of the page and the page is dynamic I can disable the horizontal scrollbar and (2) the width of the elements inside the header don't change so I can add up the minimum-required width before the drop down menu links drop to the next line, I can use the following solution:
HTML:
<body onresize="checkwidth()">
Javascript:
function checkwidth() {
var currentwidth = window.innerWidth || document.documentElement.clientWidth ||
document.body.clientWidth;
if (currentwidth < 770) {
document.getElementById("level1").className = "level1raise";
document.getElementById("help").className = "hidehelpmenu";
document.getElementById("helpdrop").className = "helpmenuhead";
document.getElementById("helparrow").className = "downarrowimage";
document.getElementById("support").className = "hidesupportmenu";
document.getElementById("supportdrop").className = "supportmenuhead";
document.getElementById("supportarrow").className = "downarrowimage";
} else {
document.getElementById("level1").className = "level1drop";
}
}
Works beautifully and is cross-browser. A little crude, but oh well.

Categories