Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Hide iPhone browser bar / Address bar/ URL

Posted on 2009-02-09
8
Medium Priority
?
16,858 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:smetterd
  • 4
  • 2
  • 2
8 Comments
 
LVL 10

Expert Comment

by:Phatzer
ID: 23595226
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
0
 
LVL 2

Author Comment

by:smetterd
ID: 23595248
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!
0
 
LVL 10

Expert Comment

by:Phatzer
ID: 23595261
Have you tried just adding this to your body tag:
onload="window.scrollTo(0, 1);"

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:smetterd
ID: 23595295
Yes I have tried adding

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

to my body tag but it has no effect.
0
 
LVL 10

Accepted Solution

by:
Phatzer earned 750 total points
ID: 23595329
I'm assuming you've tried it in addition to adding in the viewport settings as explained in the initial link? I'm sure that's all I had to do. Obviously you need to make sure that the page fits the screen too.

This has some stuff too in addition:
http://developer.apple.com/documentation/appleapplications/Reference/SafariHTMLRef/Articles/InputTypesMetaKeys.html
0
 
LVL 4

Expert Comment

by:AdamsConsulting
ID: 23596674
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.
0
 
LVL 10

Expert Comment

by:Phatzer
ID: 23598476
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.
0
 
LVL 4

Assisted Solution

by:AdamsConsulting
AdamsConsulting earned 750 total points
ID: 23608632
window.scrollTo(0,1) doesn't make the scroll bar go away. It scrolls the browser to that position. If the browser makes the scroll bar disappear with this function, then it is browser independent.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question