Created
October 2, 2011 13:37
-
-
Save JulesNeck/1257461 to your computer and use it in GitHub Desktop.
Hide URL Bar for iOS and Android based on html5 mobile boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Hide URL Bar for iOS and Android "level above next level" | |
// streamlined version without extension part | |
// slowly moving it to perfection... | |
MBP.hideUrlBar = function () { | |
if ( !location.hash ) { | |
doScrollTop = setInterval(function(){ | |
if( document.body && !( ( pageYOffset || document.body.scrollTop ) > 20 ) ){ | |
clearInterval( doScrollTop ); | |
scrollTo( 0,1 ); | |
pageYOffset = 0; | |
scrollTo( 0, ( pageYOffset === document.body.scrollTop ) ? 1 : 0 ); | |
} | |
}, 200 ); | |
} | |
}; | |
Author
JulesNeck
commented
Oct 4, 2011
via email
Hallo Joshua,
innerHeight is not supported by most browsers. Take a look at: http://www.w3schools.com/jsref/prop_win_innerheight.asp for more details.
Usually it's difficult to set the body height because a body tends to collapse to it's minimum. So adding empty content via a div is a solution to avoid this problem.
I forgot to mention, that my code uses some variable declarations I defined before. So here it is without variables (win, doc):
if ( (window.document.body.clientHeight - 100) < window.innerHeight ) {
var pageFill = window.document.createElement("DIV");
pageFill.style.height = ( window.innerHeight - window.document.body.clientHeight + 100 ) + "px";
window.document.getElementsByTagName('body')[0].appendChild( pageFill );
};
Just put this code before you try to scroll anything.
But you can also try to something like:
if ( (window.document.body.clientHeight - 100) < window.innerHeight ) {
var newHeight = window.innerHeight + 100 + "px";
doc.getElementsByTagName('body')[0].style.height = newHeight;
};
I have just made a few tests and surprisingly it seems to work. And it's even shorter as my original version, so probably a good idea.
I've used 100px for the possible menu bar height. Usually this is less (80px or so), but the dolphin browser has a very large url bar. And we're on the safe side, when it's a bit more than actually needed.
I hope, this might help you. I am also trying to find my way through javascript -hell
It's really not easy. But I think the html5 boilerplate guys are doing a great job. And figuring out how there code works helps my to get better.
Let me know if my code works in your project as expected.
Regards,
Jens
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment