Hide URL Bar for iOS and Android based on html5 mobile boilerplate

hideBar.js

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

Hey Jens,

For when the page is too short, instead of adding another div element, how about adjusting doc.body's height to be innerHeight's + 60 or so px?
You think this is good too, or you see any issues settings height to body?

Thanks,
~ JK ~

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