Hide address bar - Not working

Get help using Construct 2

Post » Sat Apr 13, 2013 4:42 am

Hello,

I have tried the built in setting "Hide address bar" as well a bunch of JavaScript scripts but all fail. I also tried some things with Browser objects. Seems I get some results when I set full-screen to off. However I want to use scale to fit all mobile screens seamlessly.

Any advice will be amazing on how to hide that darn Address Bar for a Web Mobile Game..

Thanks DrathVader2013-04-14 19:31:53
B
14
S
2
Posts: 67
Reputation: 2,044

Post » Sat Apr 13, 2013 9:03 am

It should be hidden once the game is compiled. Are you just using Preview over Wifi right now?
B
56
S
15
G
13
Posts: 826
Reputation: 17,675

Post » Sat Apr 13, 2013 12:51 pm

It's only supported on iPhone after exporting at the moment. Is that what you were checking with?
Scirra Founder
B
399
S
236
G
89
Posts: 24,529
Reputation: 195,390

Post » Sat Apr 13, 2013 1:08 pm

@Ashley I'm getting a black bar across the top of the screen on iPhone when I have it set to hide the address bar, and my game is pushed down below this bar. Any idea what this is?
B
36
S
7
G
5
Posts: 322
Reputation: 8,780

Post » Sat Apr 13, 2013 1:23 pm

Sounds like a bug, make a report in the bugs forum if something doesn't seem to work.
Scirra Founder
B
399
S
236
G
89
Posts: 24,529
Reputation: 195,390

Post » Sat Apr 13, 2013 10:14 pm

I am testing live on my server on android via scale with no results.
B
14
S
2
Posts: 67
Reputation: 2,044

Post » Sat Apr 13, 2013 10:28 pm

@Wrangler: I get the same results on Android when I use CSS or JavaScript to hide the bar. It adds a margin at the top which triggers the address bar to hide however pushes my layout down.DrathVader2013-04-13 22:34:00
B
14
S
2
Posts: 67
Reputation: 2,044

Post » Sun Apr 14, 2013 1:57 am

Well, got this to work. It seems it only works with "crop". Delete everything above the CSS and add the following. (HOWEVER) I now notice that sometimes if you rotate the phone the bar will come back and push the layout up. Ehhh this is hopeless.

-------------------------------------------------------------

<!DOCTYPE html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black>
<title>Test fullscreen</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}
</style>

<div id=page></div>

<script>
var page = document.getElementById('page'),
    ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    // Detect if this is running as a fullscreen app from the homescreen
    fullscreen = window.navigator.standalone,
    android = ~ua.indexOf('Android'),
    lastWidth = 0;

if (android) {
// Android's browser adds the scroll position to the innerHeight, just to
// make this really difficult. Thus, once we are scrolled, the
// page height value needs to be corrected in case the page is loaded
// when already scrolled down. The pageYOffset is of no use, since it always
// returns 0 while the address bar is displayed.
window.onscroll = function() {
    page.style.height = window.innerHeight + 'px'
}
}
var setupScroll = window.onload = function() {
// Start out by adding the height of the location bar to the width, so that
// we can scroll past it
if (ios) {
    // iOS reliably returns the innerWindow size for documentElement.clientHeight
    // but window.innerHeight is sometimes the wrong value after rotating
    // the orientation
    var height = document.documentElement.clientHeight;
    // Only add extra padding to the height on iphone / ipod, since the ipad
    // browser doesn't scroll off the location bar.
    if (iphone && !fullscreen) height += 60;
    page.style.height = height + 'px';
} else if (android) {
    // The stock Android browser has a location bar height of 56 pixels, but
    // this very likely could be broken in other Android browsers.
    page.style.height = (window.innerHeight + 56) + 'px'
}
// Scroll after a timeout, since iOS will scroll to the top of the page
// after it fires the onload event
setTimeout(scrollTo, 0, 0, 1);
};
(window.onresize = function() {
var pageWidth = page.offsetWidth;
// Android doesn't support orientation change, so check for when the width
// changes to figure out when the orientation changes
if (lastWidth == pageWidth) return;
lastWidth = pageWidth;
setupScroll();
})();
</script>DrathVader2013-04-14 19:32:43
B
14
S
2
Posts: 67
Reputation: 2,044

Post » Tue Nov 05, 2013 7:51 pm

Has anyone actually been able to hide address bar?I have tried countless things to be able to do so.Just nothing seems to be working .Please give a solution for this.
B
6
Posts: 5
Reputation: 269

Post » Tue Nov 05, 2013 7:52 pm

Did you get a solution for hide address bar?Please help me with that.I have tried countless different things.Thank you.
B
6
Posts: 5
Reputation: 269

Next

Return to How do I....?

Who is online

Users browsing this forum: pmerineau, Yahoo [Bot] and 22 guests