8

I am working on a mobile web app and am trying to remove the address bar. Its easy enough, unless the <body>'s natural height is not tall enough to allow for scrolling. Try as I might I cannot find a reliable iphone/android, cross device method of insuring that the <body> is tall enough to allow the address bar to disappear. Many of the methods I've seen rely on screen.height which makes the page TALLER than it needs to be. It should be EXACTLY tall enough to allow the address bar to go away and no taller!

Does anyone have a script that handles this perfectly? I all I need to to determine the height of the page minus the address bar for iphone and android.

I've tried:

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short

JQUERY allowed.

ramblinjan
  • 6,578
  • 3
  • 30
  • 38
Fresheyeball
  • 29,567
  • 20
  • 102
  • 164
  • if jquery is enabled.. u can try $(window).height(); or $(document).height(); – suraj jain Apr 01 '12 at 17:55
  • I have tried both. $(window) provides height of window WITH address bar. $(document) provides less than that height based on the too short height of the page in-question. – Fresheyeball Apr 01 '12 at 19:11
  • 1
    I had a similar problem not so long ago, I stress similar. This code really helped me out: http://menacingcloud.com/?c=iPhoneAddressBar – David Barker Apr 01 '12 at 19:34
  • I've used that before actually. It works pretty good for iPhones and with the right viewport. Problem is that its too specific, it does not address to problem in a reliable cross browser cross device future proof way. – Fresheyeball Apr 01 '12 at 19:38
  • `window.innerHeight` gets bigger after window.scrollTo(0,1) in iOS. This is the property and method used by the open source jqTouch lib. – Jonathan Hawkes Dec 17 '12 at 20:20

2 Answers2

5

This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

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

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.

From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:

window.addEventListener("load", function() { window.scrollTo(0, 1); });

This will hide the address bar until the user scrolls.

This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
});
ramblinjan
  • 6,578
  • 3
  • 30
  • 38
  • the last code block addresses this challenge. But it addresses it with +50. How do we know that the address bar is 50px high, in all instances? – Fresheyeball Apr 01 '12 at 19:45
  • You get an upvote for being the first person to actually provide a solution. – Fresheyeball Apr 01 '12 at 19:48
  • The 50px is more or less arbitrary, I believe. The scrollTo(0, 1) statement makes it so this extra amount doesn't simply create the same problem you're encountering when you set the height too large. It's the combination of the two that makes it work in all cases, as far as I can tell. – ramblinjan Apr 01 '12 at 19:51
  • I changed the structure of my answer to place the final code block at the start, since as far as I can tell it is the best solution. – ramblinjan Apr 01 '12 at 19:52
  • I'm sorry but that is not good enough. `scrollTo(0, 1)` does not work if the page is too short, and simply arbitrarily adding 50px to the window to get rid of the address bar is not accurate. The address bar may be only 45px and there by leave an excess of 5px. Or the viewport might be huge like 1000px wide so the address bar may then be 200px high leaving the page way to short. – Fresheyeball Apr 01 '12 at 19:57
  • That solution may work in may standard scenarios, but it wont account for the fragmentation of address bars on android devices or windows phone devices, or various viewports. – Fresheyeball Apr 01 '12 at 19:59
  • I think it actually includes the entire window space (including what the address bar takes up) and the 50px actually just makes sure it is slightly larger than the entire viewport: https://developer.mozilla.org/en/DOM/window.outerHeight – ramblinjan Apr 01 '12 at 20:02
  • In that case window.outerHeight would be the correct answer alone. Let me try that. – Fresheyeball Apr 01 '12 at 20:02
  • This answer contains invalid JavaScript (browsers may tolerate it, but still). Event listeners take an event parameter, for example. And what is scrollTo(0,1)? Is that 1 pixel completely arbitrary and unnecessary or do you have a reason for using it? And you really don't need the setTimeouts, they will only cause the page to jump after loading – P Varga Apr 01 '12 at 20:48
  • scrollTo is the same as window.scrollTo – Fresheyeball Apr 01 '12 at 20:50
  • Yeah, but why scroll by 1 pixel? – P Varga Apr 01 '12 at 20:51
  • 1
    @PéterVarga the reason for the 1 is that iOS doesn't like 0,0 no logical reason why. – Fresheyeball Apr 01 '12 at 20:51
  • @PéterVarga the 1 is vertical not horizontal. – Fresheyeball Apr 01 '12 at 20:51
  • Perhaps it is necessary to ensure overall compatibility or is simply necessary for their specific implementation? At any rate, I'm glad it works. – ramblinjan Apr 01 '12 at 20:58
  • `setTimeout(fn, 0)` will fail, always. The time parameter cannot be 0. – Christian Sep 14 '12 at 07:50
  • `orientationchange` is quite wrong, if the user is reading on the middle of the page and change orientation the page will suddenly jump to top, and it is quite frustrating that many websites do this just for the sake of hiding the address bar. Also a lot of times I start scrolling the page before the page is fully loaded, so when the page is ready it jumps back to the top, and it is very annoying. Another thing is that you should scroll it back to Y = 0 after hiding the address bar. https://gist.github.com/victornpb/7736786 – Vitim.us Dec 01 '13 at 17:06
  • @Vitim.us If you have a better option, you should submit it as an answer. If it's just an improvement to this one, submit an edit request. – ramblinjan Dec 03 '13 at 00:58
1

I think the way it works is the address bar is hidden when the page wouldn't fit. So you want a page exactly the height of the window including the address bar, i.e. window.outerHeight, no?

P Varga
  • 19,174
  • 12
  • 70
  • 108
  • I am looking for the available height of the page MINUS the address bar. Otherwise `$(window).height()` would work fine. – Fresheyeball Apr 01 '12 at 19:39
  • Hm, but how does that help with hiding the address bar? – P Varga Apr 01 '12 at 19:41
  • Because some pages have very little content. So the page may only be 20px high naturally. So scrolling to the top does nothing. The only way to get rid of the address bar is to style the page to be tall enough that scrolling to the top will remove it. Finding that height is the problem. – Fresheyeball Apr 01 '12 at 19:47
  • That height is the window's outerHeight..... And by scrolling to the top, you mean bottom, right? Maybe you want to **increase** the page height, but really you should just set it instead. – P Varga Apr 01 '12 at 20:41