Hide Address Bar on iPhone and Android

I found one old post addressing this issue, but I couldn't get it to work for me: http://forums.enyojs.com/discussion/comment/5237/#Comment_5237

My enyo application is being rendered into the document.body and it uses a FittableRows layout.

I would like it if, when the application loads, that the address bar is hidden until the user scrolls up on the upper 3rd of the layout. It seems like this issue would have come up before, so if there are any other relevant threads, point me in the right direction.

Here's a fiddle that's just a barebones version of the app so that you can see how it's being laid out and rendered into the document.

http://jsfiddle.net/yczPD/

Comments

  • The code at http://davidwalsh.name/hide-address-bar should work -- just add it to you main app JavaScript file at the end.
  • Thanks, Ben. I actually tried that first before posting here. I'm using the iOS simulator with iPhone 5 Retina running iOS 6.1. These are my results:

    Placing that code at the end of my main app.js file:
    No console errors. The code executes, but nothing happens.

    If I add a border-top style to either the page's body or the App kind, then the address bar will hide itself by the number of pixels of the border width. So, for example, if I add the style, border-top: 20px solid #000, to the body, then the address bar will hide itself by 20px, but then I have a 20px black border at the top of the app, which I don't want. Here's a screenshot:

    http://d.pr/i/o3ky

    If I change the border to 60px, which is the height of the address bar in iOS, then I get this:

    http://d.pr/i/QKsP

    Now I have the unwanted border and I can't get the address bar back. I even made a control at the bottom that, when tapped, should execute window.scrollTo(0,0), but that has no effect.

    Any other ideas?
Sign In or Register to comment.