Hide address bar in Safari mobile

0 favourites
  • 5 posts
From the Asset Store
Make your game more fun and interactive with the Dog Hide and Seek Buttons Sprite Sheet.
  • Hi all! :)

    I'm trying the free version of C2 to see if it could work for a mobile HTML5 game.

    How do I hide the address bar in Safari mobile? I have searched the forums before posting this, but it didn't help me. I saw some old posts talking about a built-in "Hide bar" option in the projects settings (if I understood correctly) but I'm using the last version of C2 and I can't find it.

    Here's what I'm doing: I set the Fullscreen in browser setting to Scale outer. The Window size and the Layout size are both set to 320x480. I exported the project as an HTML5 site that I put on Dropbox to test it on my iPod Touch (4th gen) with iOS 6 installed. The address bar is shown.

    How can I have the address bar hidden on Safari mobile? Thank you in advance! :)

  • I have tried using the Request fullscreen action of the Browser object inside of a touch event, but it did nothing on iOS 6.

    Then I tried another method, that initially works, but after refreshing the page doesn't work anymore. Here's what I did:

    On start of layout:

    • Browser: Execute javascript "var space = document.createElement('div'); space.style.height = '60px'; space.style.clear = 'both'; document.getElementsByTagName('body')[0].appendChild(space);"
    • Browser: Execute javascript "setTimeout(function(){           window.scrollTo(0, 1);      }, 0);"

    This way when I open Safari on the C2 app page it works correctly, but if I refresh the page, even if the address bar hides, a black border of 60 pixels appears at the bottom. Only when I close and reopen Safari it works again. Why?

    Any other ideas? Thanks!

    NOTE: The device is an iPod Touch (4th gen) with iOS 6.1.5.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • iOS 7 removed the ability to hide the address bar, and accordingly we removed the option from Construct 2 (the code is a horrible hack anyway which Apple appear to never have wanted to support in the first place).

    iOS 7.1 adds an official new option to show minimal UI, which we're already applying automatically in the latest build, so when that comes out it should be solved.

  • Thank you for your answer Ashley, but I have iOS 6.1.5 on my iPod Touch, on which I am testing.

    It's great that iOS 7.1 will introduce minimal UI, solving the problem introduced with iOS 7. In the meantime, how can I hide the address bar on iOS 6.1.5? Thank you again! :)

  • I haven't managed to correctly hide address bar on iOS 6.1.5 yet. :(

    This is my code:

    On start of layout:

    • Browser: Execute Javascript "if (!document.getElementById('space')) { var space = document.createElement('div'); space.style.height = '60px'; space.style.clear = 'both'; space.id = 'space'; document.getElementsByTagName('body')[0].appendChild(space); }"
    • Browser: Execute Javascript "if (window.location.hash.indexOf('#') == -1) { setTimeout(function(){ window.scrollTo(0, 1); }, 0); }"

    This works when I open Safari on my game's page. But after I refresh the page, the address bar still hides, but the canvas doesn't fill all available space, but I get a blank border of 60 pixels at the bottom.

    Here are two pictures showing you what I mean:

    When I open the browser on the page

    <img src="https://dl.dropboxusercontent.com/u/36601350/scirra-hide-bar-before.png" border="0" />

    After I refresh the page

    <img src="https://dl.dropboxusercontent.com/u/36601350/scirra-hide-bar-after.png" border="0" />

    Any ideas?

    Thank you again!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)