How to completely hide the navigation bar in iPhone / HTML5

Question

I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.

I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)

I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?

The menu is also really well done. Is there any framework to build apps like this one?

Gobble

Answer 1

Try the following:

1. Add this meta tag in the head of your HTML file:

   <meta name="apple-mobile-web-app-capable" content="yes" />
   

2. Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.

3. Go back to home screen and open the bookmarked site. The URL and status bar will be gone.

As long as you only need to work with the iPhone, you should be fine with this solution.

In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google it for more information or check out their demos.

Cholecystitis

The window.scrollTo solution is more device agnostic. Good tip though, Minh. – Below

@jfroom: It's just an easy workaround for the issue. You can call it tip or trick but it works tho :) – Cholecystitis

this solution no longer works in iOS7 Safari any ideas on how to do it in iOS7 – Helluva

Answer 2

Remy Sharp has a good description of the process in his article "Doing it right: skipping the iPhone url bar":

Making the iPhone hide the url bar is fairly simple, you need run the following JavaScript:

window.scrollTo(0, 1); 

However there's the question of when? You have to do this once the height is correct so that the iPhone can scroll to the first pixel of the document, otherwise it will try, then the height will load forcing the url bar back in to view.

You could wait until the images have loaded and the window.onload event fires, but this doesn't always work, if everything is cached, the event fires too early and the scrollTo never has a chance to jump. Here's an example using window.onload: http://jsbin.com/edifu4/4/

I personally use a timer for 1 second - which is enough time on a mobile device while you wait to render, but long enough that it doesn't fire too early:

setTimeout(function () {   window.scrollTo(0, 1); }, 1000);

However, you only want this to setup if it's an iPhone (or just mobile) browser, so a sneaky sniff (I don't generally encourage this, but I'm comfortable with this to prevent "normal" desktop browsers from jumping one pixel):

/mobile/i.test(navigator.userAgent) && setTimeout(function
() {   window.scrollTo(0, 1); }, 1000); 

The very last part of this, and this is the part that seems to be missing from some examples I've seen around the web is this: if the user specifically linked to a url fragment, i.e. the url has a hash on it, you don't want to jump. So if I navigate to http://full-frontal.org/tickets#dayconf - I want the browser to scroll naturally to the element whose id is dayconf, and not jump to the top using scrollTo(0, 1):

/mobile/i.test(navigator.userAgent) && !location.hash &&
setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10 and you'll see it will only scroll when you've landed on the page without a url fragment.

Hereunto

I could not have this working with my app. It seems I have a problem with the size of the map_canvas I'm using. In the best case I only have half the navigation bar that hides. – Gobble

It works only if the content height is larger than like 420 points. – Hemimorphic

Thanks for this great answer, works a treat. I still wonder how the site referenced in the question so neatly keeps the address bar hidden even with scrolling. – Coughlin

Answer 3

The problem with all of the answers given so far is that on the something borrowed site, the Mac bar remains totally hidden when scrolling up, and the provided answers don't accomplish that.

If you just use scrollTo and then the user later scrolls up, the nav bar is revealed again, so it seems you have to put the whole site inside of a div and force scrolling to happen inside of that div rather than on the body which keeps the nav bar hidden during scrolling in any direction.

You can, however, still reveal the nav bar by touching near the top of the screen on apple devices.

Protohistory

Answer 4

Simple javascript document navigation to "#" will do it.

window.onload = function()
{
document.location.href = "#";
}

This will force the navigation bar to remove itself on load.

Nilsanilsen