Removing the iphone navigation bar with jquery

30 April, 2012 by Tom Elliott

Update 2: iOS 7.1 allows us to remove the nav bar using “minimal-ui” in the meta tag
Update: Since iOS 7, hiding the navigation bar no longer works using the method below, or any method I could find. If anyone finds a solution to this, please let me know 🙂

Recently, I’ve been working on some interactive, smartphone optimised websites using jQuery and have wanted to maximise the visible pixel area available on the iPhone screen. By removing the top address navigation bar, we can free up an additional 60 pixels (older iPhone models) or 120 pixels (iPhone 4+), which is about a fifth of the visible area when viewed in landscape mode.

This can make a huge difference when developing mobile websites or web apps; not only can as you can fit a decent amount of extra content into this space but it also makes the web app look much more native.

The below JavaScript works if you are using the jQuery framework and will hide the navigation bar when the page loads.

(function($) {
   $(document).ready(function() {
      setTimeout(function () {
         window.scrollTo(0, 0);
      }, 100);
   });
})(jQuery);

I have also found it useful to keep the navigationaddress bar hidden when the iPhone rotates to change orientation. The below JavaScript will do just that and you can add it immediately below the setTimeOut function as shown above:

$(window).bind('orientationchange resize', function(event){
      var orient = window.orientation;
      if(orient == 0) { //0 = portrait, -90 or 90 = landscape
         window.scrollTo(0, 0);
      } else {
         window.scrollTo(0, 0);
      } 
  });

It is worth noting that this JavaScript code to hide the navigation bar will only work when there is scrollable content. If for example, you have a web page that’s full of absolutely positioned divs and none of this content scrolls, then you will need create some scrolling content. For example by positing a DIV element below the bottom of the page.



Hiding the navigation and address bar in Safari (iOS 7.1) »


4 Comments

  • nicmare says:

    seems not to work anymore?!

    • Tom Elliott says:

      Hey yeah, iOS 7 now seems to enforce the display of the navigation bar which it removes automatically when scrolling. I have so far not found any ways to remove the navigation bar other than adding the app to the homescreen or using Chrome :S.

  • Lee says:

    As of iOS 7.1 adding “minimal-ui” to the viewport metatag removes the navbar. E.g: . Hope this is useful.

    • Tom Elliott says:

      Hi Lee, thanks! I’d forgotten I’d blogged about minimal-ui in a more recent post so updated this post for anyone else who might read it 🙂