Link to home
Start Free TrialLog in
Avatar of smetterd
smetterdFlag for United States of America

asked on

Hide iPhone browser bar / Address bar/ URL

I would llike to automatically hide the address bar in mobile safari for my web application. I know it can be done, I just can't figure out how.

Mr. Hewitt offers the following code, which will hide the browser IF one turns to landscape mode. I want to hide it no matter which viewing mode the user is in.

<script type="application/x-javascript">
    
    addEventListener("load", function()
    {
        setTimeout(updateLayout, 0);
    }, false);
 
    var currentWidth = 0;
    
    function updateLayout()
    {
        if (window.innerWidth != currentWidth)
        {
            currentWidth = window.innerWidth;
 
            var orient = currentWidth == 320 ? "profile" : "landscape";
            document.body.setAttribute("orient", orient);
            setTimeout(function()
            {
                window.scrollTo(0, 1);
            }, 100);            
        }
    }
 
    setInterval(updateLayout, 400);
    
</script>

Open in new window

Avatar of Phatzer
Phatzer
Flag of United Kingdom of Great Britain and Northern Ireland image

These guys can be helpful sometimes, check this article to see if it does what you want. I was, however under the impression that the address bar couldn't be hidden on web apps, but just tucked away, but I might be wrong :)

http://ajaxian.com/archives/iphone-full-screen-webapps
Avatar of smetterd

ASKER

Tucked away is perfect. If I go to google.com on my iphone, the url is hidden by default, but I can scroll up to manipulate it.

That is what I want!
Have you tried just adding this to your body tag:
onload="window.scrollTo(0, 1);"

Open in new window

Yes I have tried adding

onload="window.scrollTo(0, 1);"

to my body tag but it has no effect.
ASKER CERTIFIED SOLUTION
Avatar of Phatzer
Phatzer
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This javascript doesn't remove the address bar, it displays the page in landscape mode, which by default disables the address bar. There is no way to disable the address bar in javascript.
The javascript does not remove the address bar, but it does tuck it away using window.scrollTo(0, 1). On my web applications, that single line tucks away the address bar once the page has loaded, by scrolling to the bottom of the page (as is my understanding) and thus the address bar slides away one that function is run.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial