We Keep Coding

Resize content when drawer is open in MDL

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;
}

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Fixed/absolute positioning neglected in iOS when focusing on input

I'm building an app with Phonegap and I have a header which I have fixed to the top of viewport.
header {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: red;
z-index: 100;
}
This works as I want except when I tap a input field and the keyboard slides up. Then the positioning is totally discarded. The header is slided higher up outside the visable view. It returns to its place after closing the keyboard again.
I have read that some mobile browser don't care about positioned fixed and absolute to make sure that a possibly small screen don't get covered with a fixed element. Is this true?
Is there a way around this?
I have tried setting the header to absolute when a input is focused. I read about it here, http://dansajin.com/2012/12/07/fix-position-fixed/. However, it doesn't seem to be working for me.

PhoneGap’s implementation of fixed positioning for iOS is poor when it comes to the virtual keyboard. I’ve tried a number of proposed solutions, including the one you linked to, but none of them worked satisfactorily. Disabling KeyboardShrinksView can cause the input field to get hidden under the keyboard.
I ended up going with this workaround, which simply hides the fixed header when the keyboard slides into view and shows it again after the keyboard slides out of view. I await a more complete fix, but this solution has the benefit of being clean and reliable. The 10 ms delay on show() is enough to prevent the header from momentarily flashing in the wrong place while the keyboard is sliding back down. The 20 ms delay on hide() prevents the header from popping up in the wrong place if the user goes directly from one input field to the next.
$(document).on('focus','input, textarea, select',function() {
setTimeout(function() {
$('header').hide();
},20);
});
$(document).on('blur','input, textarea, select',function() {
setTimeout(function() {
$('header').show();
},10);
});

Detect the presence of the ie10 metro address bar with javascript

I have a site that has some call to action buttons in a div that is fixed to the bottom of the screen.
We are currently using a div that is positioned absolutely as follows
<div id="buttonBar">footer code</div>
<style>#buttonBar{ bottom: 0; width: 100%; position: fixed; }</style>
This has worked well in all the browsers except for IE10 in metro (modern) mode.
When a link is clicked the address bar shows and covers the button bar, it then disappears
Other than redesigning the layout of the page, I would like the button bar to sit just above the address bar when it is shown.
Does anyone know a way of detecting whether the address bar is visible using javaScript?

You could try to move the footer above the location-bar, until the location-bar collapses, then drop the footer back down. Here's a potential solution:
1.
Move your footer up 50px (or whatever) if the user is likely on an IE10 touch-enabled browser
if (!!window.navigator.msPointerEnabled) { // sniff for IE10 + touch
$("#buttonBar").css("transform", "translateY(-50px)");
}
2.
Listen for the first interaction with the browser, then collapse the footer with the location-bar.
$("body").on("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown", function () {
$("body").off("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown");
$("#buttonBar").css("transform","translateY(0)");
});
This solution hasn't been 100% reliable, there are clearly some interactions that collapse the location-bar but don't trigger an event. I'm working on a better solution and will update once found, but figured I'd share this to get the ball rolling.

jQuery Mobile prevent scroll-to-top before page transition?

When I click on a list-item, to go to another page, the current page jumps to the top of the screen before transitioning to the next page.
This problem occured in jQM 1.2, and is still not fixed in the newly released 1.3 version.
Does anybody know how to prevent the scroll-to-top, and remember the scroll position when using the back button?
This annoying behaviour is unacceptable, and breaks the whole app experience.
I'm using it as a webapp, on an iPhone 4S, with iOS 6.1.2.

Before I describe your available solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.
If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.
There are 2 viable solutions:
1. iScroll and its jQuery Mobile derivate iScrollview
iScroll homepage: http://cubiq.org/iscroll-4
iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview
iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.
That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.
Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.
2. Silent scroll
Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html
This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.
In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changed. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.
//scroll to Y 100px
$.mobile.silentScroll(100);
And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/5zZzz/
More info
If you want to find out more about this topic take a look at this article, you will also find working examples.

I was able to fix this (for iOS) in the following way:
Add a extra container div for the scrolling part. Usually surrounding the scrolling part of your page. In my case right after the header and before the footer code.
Add the following CSS:
.extracontainer {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
Some of the CSS might be extra but in my case it was to avoid any issues with some other styles that I have using negative margins, paddings, etc.
Also make sure to have the -webkit-overflow-scrolling: touch; to have smooth scrolling.
I hope this helps.

$( document ).on( "mobileinit", function() {
var silentScroll = $.mobile.silentScroll;
$.mobile.silentScroll = function( ypos ) {
if ( $.type( ypos ) !== "number" ) {
// FIX : prevent auto scroll to top after page load
return;
} else {
silentScroll.apply(this, arguments);
}
}
}

For Jquery Mobile 1.4.5 i fixed that by changing this line in jquery.mobile-1.4.5.min.js:
a.mobile.hideUrlBar&&g.load(a.mobile.silentScroll)
to this:
a.mobile.hideUrlBar

Solution to prevent scrool to top is:
body onload="$.mobile.silentScroll(window.scrollY);"

try to use scrollstart to detect window scroll event in jquery mobile, in case you need :)