Hide the URL bar on iOS and Android

Browsing the web on mobile devices often hides the addressbar, when the page loads. I addition to that, you may see a fixed topbar, that stays in position as you scroll down the page. You can achieve this effect on your mobile page relatively easy - this tutorial should get you going.

1: Fix the viewport. Create a blank HTML document. Enter the following meta-statement in the head-section.  <meta content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" name="viewport" /> The viewport, makes it possible to access information about the device, that is accessing the page. To make sure that the page isn't zoomable, and do not rescale while pintching, everything is set to 1. I set the with to the same as the device width. You can read the full specification at http://dev.w3.org/csswg/css-device-adapt/

        <div id="topbar">

            <h2>

                Here goes the header

            </h2>

        </div>

        <div id="content">

            <ul>

                <li>

                    First line

                </li>

                <li>

                    Second line

                </li>

                <li>

                    Third line

                </li>

                <li>

                    More lines, please

                </li>

                <li>

                    More lines, please

                </li>

            </ul>

        </div>

2: Place some content. In this tutorial, I will focus on the most basic elements to make it work. Feel free to add more, so scrolling actually will appear, when the page is viewed on a device. Make to div tags on the page. Give them an id of "header" and "content". Place some random content inside. Something like this:

3: Style the content. The main goal here, is to make sure the the header stays in place, while the text scrolls. This can easely be achieved with the css property position. Write the following in the header section, or an attached stylesheet:

 body {margin:0px; padding:0px; } #topbar { position: fixed; height: 100px; width: 100%; left: 0px; top: 0px; background-color:#9CF;}         #content { margin-top:100px; } #topbar h2 { margin:5px; }

4: Go away, URL bar!  As soon as the page loads, you have to move the scrollPosition to 0,0. I haven't actually researched, but I may be the fact that the address bar operates in the negative field. Never mind, I may write an update, if I (or you) find an answer to that. Write the following in the header section, as well:

 addEventListener("load", function() {setTimeout(hideURL, 0);}, false); function hideURL() { window.scrollTo(0, 0); }

5: Reposition, near the top. There is still a little problem. When you scroll to the top, you are still able to scroll by and show the address bar. While this is practical, if you want to go to a different site, but you can add some JavaScript to make it fall into place, when the address bar is visible for a period of time, without being used. Modify the script section so it looks like this:

 var dist = 40; var away = false; addEventListener("load", function() {}, false); addEventListener("scroll",testTop, false);         function testTop() { if(window.scrollY < dist && away === true) { setTimeout(hideURL, 1000); away = false; } else         if (window.scrollY > dist away === false) { away = true; } } function hideURL() { window.scrollTo(0,0); }

First, two variabels is defined: dist and away. Dist is the distance to the top the code needs before relocate. You can experiment with different settings. You will find, that the page actually relocates, when close to the top. Away is a boolean switch that makes sure, the site isn't repositioning itself, when away from the top. I have set a timer on the repositioning, so it happens after a second. That would give the user some time to refresh, or start entering a new URL.

NB: This solution is a "quick and dirty" one. It could go for the most sites. If you want a solid iOS version, you have to test for the touchmove event, prevent the default behavior and use webkit transform to position it. While that would be the "right way" - this solution fit's well when it comes to simplicity :-)

Look at the attached file for a version or visit  http://eksempler.hjaelpmignu.dk/dreamweaver/javascript/mobiletest.html  on your device.