end3r

How to hide address and status bars on mobile?

Recommended Posts

Do you have any good bulletproof universal way to hide those bars on your mobile HTML5 games on different devices? There was scrollTo approach, but it's old, not always work and it's buggy. Any ideas or working resources on the topic?

 

I'm using Canvas CSS3 Transforms in Captain Rogers to scale it up to have 100% of the height, but the problem with the bars forces the game to be still quite small.

Share this post


Link to post
Share on other sites

good bulletproof universal way

 

That phrase almost *never* applies to web programming.

 

That being said, looks like the way to do this is with `window.scrollTo(0,1)`:

 

function hideURLbar() {	if (window.location.hash.indexOf('#') == -1) {		window.scrollTo(0, 1);	}}if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {    addEventListener("load", function() {            setTimeout(hideURLbar, 0);    }, false);}

 

See:

 

http://davidwalsh.name/hide-address-bar

http://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android

http://atlchris.com/1847/quick-tip-hide-mobile-web-browser-address-bar-improved/

Share this post


Link to post
Share on other sites

I mean the best way possible out of the available options ;)

 

Those two links are 2 years old - I know how to use Google, both ways did not work for me, that's why I asked here.

 

Thanks for the source code though - it didn't worked on Samsung Galaxy S3, on iPhone 4 is still kind of buggy, but it at least hide the bars which didn't worked earlier.

Share this post


Link to post
Share on other sites

I also always have some problems with proper hiding address bar on different devices and browsers.

 

It won't be so helpful, but I noticed that games made with TreSensa game engine solve it pretty well. It could be a good idea to look what tricks they use to make it working.

Share this post


Link to post
Share on other sites

It's been a while since I messed around with it, but here's what we have:

 

CoffeeScript:

# Hide URL bar on mobile# Make the page taller so it scrolls on mobile (first load)pageFill = nullif (document.body.clientHeight - 75) < window.innerHeight	pageFill = document.createElement("div")	pageFill.style.height = ( window.innerHeight - document.body.clientHeight + 75 ) + "px"	document.getElementsByTagName("body")[0].appendChild pageFilldoScrollTop = setInterval(->	if document.body		clearInterval doScrollTop		scrollTo 0, 1		pageYOffset = 0		scrollTo 0, (if (pageYOffset == document.body.scrollTop) then 1 else 0)		setTimeout ->			# remove that extra padding we put in			if pageFill				document.getElementsByTagName("body")[0].removeChild pageFill 		, 1000, 200)

Here's what that compiled CoffeeScript ends up as JavaScript:

var doScrollTop, pageFill;pageFill = null;if ((document.body.clientHeight - 75) < window.innerHeight) {  pageFill = document.createElement("div");}pageFill.style.height = (window.innerHeight - document.body.clientHeight + 75) + "px";document.getElementsByTagName("body")[0].appendChild(pageFill);doScrollTop = setInterval(function() {  var pageYOffset;  if (document.body) {    clearInterval(doScrollTop);    scrollTo(0, 1);    pageYOffset = 0;    scrollTo(0, (pageYOffset === document.body.scrollTop ? 1 : 0));    return setTimeout(function() {      if (pageFill) {        return document.getElementsByTagName("body")[0].removeChild(pageFill);      }    }, 1000);  }}, 200);

A little hack-ish, but I don't think we've run into any issues with it recently. Perhaps there's a more glamorous solution out there though.

 

Not sure how the CSS transforms are effected though.

Share this post


Link to post
Share on other sites

Those two links are 2 years old - I know how to use Google, both ways did not work for me, that's why I asked here.

Your page needs to be taller than the screen. You can add margin-bottom to your body if needed.

Share this post


Link to post
Share on other sites

The only thing I've found that consistently worked is Zynga's Viewporter lib. It doesn't matter that it's a few years old as nothing has changed since then, it's still as crap now as it was back then.

 

I recently recoded it extensively for Phaser and added in a lot more options, but it's very tied to the framework and not easy to extract, but may be worth looking at for some pointers.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.