Treehouse

Hide the Address Bar within Mobile Web Applications

By on  
iPhone Hide Address Bar

With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages:

  • A rendering engine with capable of flawless CSS animations
  • A rendering engine that's fast...very fast
  • A rendering engine that's modern and forward-thinking

These advantages allow us to create web apps within that browser that look as good as native applications.  If your goal is to create web apps that look like native applications, the details count.  One of those details:  hiding the address bar.  Native applications don't have address bars so why should your app? As an added bonus, hiding the address bar will provide you an extra 60 pixels of space!

You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is.  All you need is a touch of JavaScript!

The JavaScript

// When ready...
window.addEventListener("load",function() {
	// Set a timeout...
	setTimeout(function(){
		// Hide the address bar!
		window.scrollTo(0, 1);
	}, 0);
});

The window.scrollTo method is the key to hiding the address bar.  The wrapping setTimeout function is required by the iPhone to properly hide the address bar -- not using setTimeout will cause problems.

Bonus: META Tag for Bookmarked Sites

If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser:

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

And that's all!  The address bar is hidden until the user swipes down near the top bar of the application.  With the address bar hidden, your web app can look just like a native app!

ydkjs-3.png

Recent Features

  • 9 Mind-Blowing Canvas&nbsp;Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • Send Text Messages with&nbsp;PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

Discussion

  1. Juan Velandia

    Thanks!, didn’t know about that meta and works just great :)

  2. Michael Tully

    This is a brilliant little script, makes the website look much better, just tried it on a clients site I am doing for them on our testing server and looks brilliant. http://vivimed.planet-group.co.uk

    Couldn’t get the meta tag version to work….

    Would I be right in thinking this will also work on iPad aswell???

  3. That’s just plain cool. Javascript FTW. Thanks for the tip!

  4. Hi there!!
    I am trying the code in the mobile version of my company. I can´t make it work. Do you know what the problem is?
    Thank you!

  5. Jaffe

    Doesn’t seem to be working. have tried all the above steps… Did the new iOS update change things?

  6. Michael Tully

    I have the the script version working a treat and works well on a clients website: http://www.vivimedlabs.com I inserted it after my “domready” request on its own line like this..

    if((Browser.Platform.ios) || (Browser.Platform.webos) || (Browser.Platform.android)) {
    	//For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
    	// When ready...
    	window.addEventListener("load",function() {
    	  // Set a timeout...
    	  setTimeout(function(){
    		// Hide the address bar!
    		window.scrollTo(0, 1);
    	  }, 0);
    	});
    }
    

    This way I stopped it from generating errors.

  7. Michael Tully

    P.s I did wrap my code in “” tags but seems to of come up a bit strange.?

  8. Michael Tully

    This maybe a bit better to make sure its the Safari Browser you scrolling on, on either platform

    if((Browser.Platform.ios) || (Browser.Platform.webos) && (Browser.safari)) {
      //For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
      // When ready...
      window.addEventListener("load",function() {
        // Set a timeout...
        setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
        }, 0);
      });
    }
    

    This works for me but if anyone can better the IF statement please fire away

  9. Michael Tully

    This maybe a bit better to make sure its the Safari Browser you are scrolling on, on either Mobile Platfrom

    if((Browser.Platform.ios) || (Browser.Platform.android) && (Browser.safari)) {
      //For iPhone and Andriod To remove Address bar when viewing website on Safari Mobile
      // When ready...
      window.addEventListener("load",function() {
        // Set a timeout...
        setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
        }, 0);
      });
    }
    

    This works for me but if anyone can better the IF statement please fire away

    **Mod please delete the 3 above previous post**

  10. I just confirmed that it is indeed working in latest iOS. I think the problem people are having is probably that their page isn’t tall enough. If your page is too short to scroll up, the scroll script won’t work.

  11. Andrew

    This breaks for me on orientation change – at least in Android’s Browser.

    • Could you call the function again on orientation change?

      window.onorientationchange = function() {
          setTimeout(function(){
              window.scrollTo(0, 1);
          }, 0);
      }
      
  12. This seems to work great on the iPhone but not on the iPad. Anyone get this to work on an iPad?

    • John G

      I’d like to find out how this also works on the iPad. Any suggestions or answers? Thx.

    • I never really resolved my issue with this, it didn’t end up being a huge deal for what I needed it for so I just consolidated to allow the extra space at the top of my layout.

  13. Nice work, man. You should probably mention that the page has to be long enough to fill the screen (sans-address-bar), otherwise it will not scroll the address bar out of the way. I think that should answer a lot of people’s problems on here…

    I have one question, though… once you’ve loaded the page and hidden the address bar, the user can still open it up again. I’ve been trying all sorts of things trying to figure out a way of re-hiding it when the user taps back onto the page, but can’t find a method that works properly… Any ideas?

    • Exactly, your screen needs to be long enough for the address-bar to disappear.
      But now I want to have a height of 100% and still make the address-bar disappear, any tried this? and succeeded?
      height 100% just takes the available height of the page minus the space for the address-bar…

  14. Robert Römer

    @Thomas Giles

    This is just a quick tip, but have you tried the onFocus event?

    • Very cool script… Really like that functionality…BUT,

      I have installed th same on my site and have it working great, but notice just as in yours mike, that when you view and launch the web app from home screen it hides browser, but the first link you hit on page it opens the new page in a browser, like a hyperlink off an app.

      I am looking to have the entire site and any of the htm pages in the same directory and any subdirectories open in the web app mode ie. without the browser.

      Suggestions? Does anyone else have this working?

  15. Dan

    Forgive me for being new to this. I’m would like to get this to work on my mobile site, but the attempts I have made have failed. I’m thinking I’m placing the code in the wrong js file. Is there a specific one I should place it in?

    If it’s of any help, the website I’m creating is a wordpress site.

    Thank you!

  16. @RANDY CALCATERRA
    This is what I’ve been using to keep my links from opening anew in mobile Safari.

    jQuery(document).delegate("a:not(.studylink, .refresh, .highslide, .back)", "click", function(event){
    		window.location=this.getAttribute("href");
            return false;
    	});
    

    This targets all of my a tags and returns false when clicked, so that they don’t open the way they want to. So instead of opening the link in the browser, I reset the location of the window to the href that I pulled off the clicked a tag.

    I use delegate, because I sometimes create links dynamically, and .click() only binds the click event to elements that are in the document at the time the code runs.

    This was a helpful article if you’re interested in the differences between .bind(), .live(), .delegate(), and .on():
    http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

    Hope that’s helpful.

  17. I am so sorry to have posted so much. I was trying to figure out how to get it formatted correctly.
    That last post is the closest to what I wanted…

  18. john

    I tried this code on my mobile games pages, which are longer than 960pixels, but it never works. I guess there are some other requirements for this method to work.

  19. Dre

    Really?.. are we really that lazy?.. we really can’t scroll down a few pixels by hand? :|… it’s a website.. it should look like one… i want to see the address up there.. want to know where I am..
    I love apple’s way of being (just works.. ) but most of you’ve just turned it into a couch-potato-do-everything-for-me thing…
    thanks for the comment nonetheless.. any bit of info is always appreciated… (but still)

  20. Perfect, thank you very much! Works great on my iPhone layout :)

  21. Jesper

    It seems it only works, when you add a ‘#’ sign in the very end of your urladdress

  22. Tom

    Hero! Thanks!

  23. Leung

    Seems like this is obsolete code now as in I get full screen by default when loading jquery mobile.

  24. Well, this is not enough.
    Hiding the address bar is one thing, but one of the biggest remaining problem is for one-div views (imagine a map-based app). You have to define the exact size of the height of your browser, without address bar. This is not as easy as the one listed here.
    Would be interested to have your point of you on this.
    Stackoverflow has a discussion on this :
    http://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android

    But none of the listed solutions work correctly on all browsers (i tested chrome, iphone, ipad).

  25. This now works in the latest version of Chrome for iOS too!

  26. Thank You David, works perfectly

  27. John

    Great script but I have an issue. For example, I have a banner that a user clicks on and is redirected to my page that has the above script. When the page first loads the header bar doesn’t hide, but if i refresh the page the address bar does hide. im testing on a iphone 4 ios6. any help would be much appreciated.

    Thank you.

  28. Doesn’t work if app is as high as the browser window :-/

    • theartist

      Right, the page use to have to be 1500 pixels tall, now it looks like it has to be 1800 pixels tall. (I can’t get any of this to work on iPads though)

  29. It is doesn’t work for me. Address bar remains the same …

  30. Works great for me thank you for enlighting

  31. It doesn’t work on ipad!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!