Hide address bar in Safari mobile

Get help using Construct 2

Post » Thu Jan 23, 2014 8:00 am

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! :)
B
7
S
1
G
4
Posts: 16
Reputation: 1,332

Post » Fri Jan 24, 2014 12:35 pm

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.
B
7
S
1
G
4
Posts: 16
Reputation: 1,332

Post » Fri Jan 24, 2014 1:05 pm

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.
Scirra Founder
B
398
S
236
G
88
Posts: 24,428
Reputation: 194,625

Post » Fri Jan 24, 2014 1:14 pm

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! :)
B
7
S
1
G
4
Posts: 16
Reputation: 1,332

Post » Sun Jan 26, 2014 4:56 pm

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

After I refresh the page


Any ideas?
Thank you again!
B
7
S
1
G
4
Posts: 16
Reputation: 1,332


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 41 guests