title: How does jquery mobile hide mobile safari's addressbar?
body: <p>How does jQuery mobile hide mobile safari's addressbar? I think I need a similar solution,
  but i don't want to use jQuery mobile ...</p>
  
  <p>I tried:</p>
  
  <p><a href="http://davidwalsh.name/hide-address-bar" rel="nofollow noreferrer">http://davidwalsh.name/hide-address-bar</a></p>
  
  <p>but that doesn't work in my case.</p>
  
  <p>My first child of the body is an absolute positioned div
  with <code>-webkit-overflow-scrolling: touch</code>;</p>
  
  <p>The <code>-webkit-overflow-scrolling</code> property seems to cause this problem,
  without that property it works fine.</p>
  
  <p>Part of this problem is the address bar always stays in foreground, even if I scroll the page down per hand. this is caused by the absolute positioning.</p>
  
  <p>But, without absolute positioning, "-webkit-overflow-scrolling: touch;" doesn't work ...</p>
  
  <p>After a big fight with thousends of lines jquery-mobile code, i ended up with this ;)</p>
  
  <p><strong>Solution</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;title&lt;/title&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
          &lt;!-- viewport --&gt;
          &lt;meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /&gt;
  
          &lt;style type='text/css'&gt;
              body {
                  background: #E0E0E0;
                  margin: 0;
                  padding: 0;
              }
  
              .page-wrapper {
                  width: auto;
              }
  
              /* native overflow scrolling */
              .mobile-touch-overflow {
                  overflow: auto;
                  -webkit-overflow-scrolling: touch;
                  -moz-overflow-scrolling: touch;
                  -o-overflow-scrolling: touch;
                  -ms-overflow-scrolling: touch;
                  overflow-scrolling: touch;
              }
              .mobile-touch-overflow,
              .mobile-touch-overflow * {
                  /* some level of transform keeps elements from blinking out of visibility on iOS */
                  -webkit-transform: rotateY(0);
              }
  
              .page-header {
                  display: block;
                  background: gray;
                  border-bottom: 1px solid #CDCDCD;
                  padding: 10px;    
              }
  
              .page-content {
                  padding: 10px;
              }
  
              .page-footer {
                  display: block;
                  border-top: 1px solid #CDCDCD;    
                  margin-left: 10px;
                  margin-right: 10px;
                  padding: 10px;
                  padding-left: 0;
                  padding-right: 0;
                  text-align: center;
                  font-size: 12px;
                  color: #FFF;
              }
          &lt;/style&gt;
  
          &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt;
                  /*
                  * utils
                  */
  
                  var utils = {
  
                      supportTouchOverflow : function(){
                          return !!utils.propExists( "overflowScrolling" );
                      },
  
                      supportOrientation : function(){
                          return ("orientation" in window &amp;&amp; "onorientationchange" in window);
                      },
  
                      //simply set the active page's minimum height to screen height, depending on orientation
                      getScreenHeight : function(){
                          var orientation     = utils.getOrientation(),
                              port            = orientation === "portrait",
                              winMin          = port ? 480 : 320,
                              screenHeight    = port ? screen.availHeight : screen.availWidth,
                              winHeight       = Math.max( winMin, $( window ).height() ),
                              pageMin         = Math.min( screenHeight, winHeight );
  
                          return pageMin;
                      },
  
                      // Get the current page orientation. This method is exposed publicly, should it
                      // be needed, as jQuery.event.special.orientationchange.orientation()
                      getOrientation : function() {
                          var isPortrait = true,
                              elem = document.documentElement,
                              portrait_map = { "0": true, "180": true };
                          // prefer window orientation to the calculation based on screensize as
                          // the actual screen resize takes place before or after the orientation change event
                          // has been fired depending on implementation (eg android 2.3 is before, iphone after).
                          // More testing is required to determine if a more reliable method of determining the new screensize
                          // is possible when orientationchange is fired. (eg, use media queries + element + opacity)
                          if ( utils.supportOrientation() ) {
                              // if the window orientation registers as 0 or 180 degrees report
                              // portrait, otherwise landscape
                              isPortrait = portrait_map[ window.orientation ];
                          } else {
                              isPortrait = elem &amp;&amp; elem.clientWidth / elem.clientHeight &lt; 1.1;
                          }
  
                          return isPortrait ? "portrait" : "landscape";
                      },
  
                      silentScroll : function(ypos) {
                          setTimeout(function() {
                              window.scrollTo( 0, ypos );
                          }, 20 );            
                      },
  
                      propExists : function(prop) {
                          var fakeBody = $( "&lt;body&gt;" ).prependTo( "html" ),
                              fbCSS = fakeBody[ 0 ].style,
                              vendors = [ "Webkit", "Moz", "O" ],
                              uc_prop = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
                              props = ( prop + " " + vendors.join( uc_prop + " " ) + uc_prop ).split( " " );
  
                          for ( var v in props ){
                              if ( fbCSS[ props[ v ] ] !== undefined ) {
                                  fakeBody.remove();
                                  return true;
                              }
                          }
                      },
  
                      hideAdressbar : function(){
                          if(utils.supportTouchOverflow()){
                              $('.mobile-touch-overflow').height( utils.getScreenHeight() );
                          }
                          utils.silentScroll(1);      
                      }
  
                  };//utils end
  
                  // WINDOW LOAD
                  $(window).load(function(){
                      utils.hideAdressbar();      
                  });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div class="page-wrapper mobile-touch-overflow"&gt;
              &lt;header class="page-header"&gt;Header&lt;/header&gt;
              &lt;div class="page-content"&gt;
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
                  &lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###&lt;br&gt;###
              &lt;/div&gt;
              &lt;footer class="page-footer"&gt;Footer&lt;/footer&gt;                
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>works fine, tested in android 2.1 &amp; iphone4(ios5+)</p>
  
  <p>there was another Problem with this code, fixed here:
  <a href="https://stackoverflow.com/questions/9830186/hide-address-bar-in-mobile-safari-when-scrolling-touchoverflow">Hide address bar in mobile Safari when scrolling (touchOverflow)</a></p>