[REQ] Hide Address Bar

[GoogleCodeExporter]

What steps will reproduce the problem?
Add window.scrollTo(0,1) to force the address bar to go away (more real estate 
especially in landscape).

What is the expected output? What do you see instead?
I expect this trick to play nice with iScroll or even be integrated into 
iScroll. Instead, the address bar disappears giving me the extra 60px, but the 
fixed content moves 60px away from the bottom as well.

What version of the product are you using? On what operating system?
iScroll 3.4.3

Please provide any additional information below.
This would be great to integrate into iScroll. When the user scrolls down, set 
the viewport to 0, 1 forcing the address bar to hide. Even better would be to 
add if the user scrolls back up, it should set viewport to 0, 0. (Currently the 
only way to get it back is to click the status bar).

See 
http://www.iphonemicrosites.com/tutorials/how-to-hide-the-address-bar-in-mobiles
afari/ for more detail about this trick.

Original issue reported on code.google.com by microa...@gmail.com on 29 Jun 2010 at 11:17

[GoogleCodeExporter]

It's not related to iScroll. The URL bar disappears only if the content is 
bigger than the visible screen. Taking care of this is outside the iScroll 
duties. Anyway, I'll make an example to help you out.

Original comment by mat...@gmail.com on 30 Jun 2010 at 6:12

• Changed state: WontFix
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

With all due respect, I have tried your own example on 
http://cubiq.org/dropbox/iscroll which is bigger than the visible screen. 
Scrolling does NOT make the URL bar disappear if iScroll is activated. I am 
testing with iPhone OS 3.1.2. I have attached a snapshot of your example.

Original comment by microa...@gmail.com on 30 Jun 2010 at 9:56

Attachments:

• IMG_0018.png

[GoogleCodeExporter]

In the example you mentioned the page height (not the scroller height) matches 
exactly the visible area, so the URL bar is not hiding.

Original comment by mat...@gmail.com on 30 Jun 2010 at 10:14

[GoogleCodeExporter]

After some research and with the pointer above, I was able to get it to work. 
In order to do so, you have to (a) catch the onorientationchange/resize and (b) 
add scrollTo and adjust the heights to fit the full screen. This works, with 
the caveat that the user cannot scroll to the top and see the address bar.

Here is a working example. http://microalps.com/iscroll/urlbar.html

Original comment by microa...@gmail.com on 1 Jul 2010 at 12:03

[GoogleCodeExporter]

Any chance this has been integrated as a built in option yet? Was just working 
on the same issue.

Otherwise, fantastic script! And, thanks!

Original comment by a.perry...@gmail.com on 1 Feb 2011 at 10:28

[GoogleCodeExporter]

I just added window.scrollTo(0, 1); above the variable definitions in 
setHeight() and it worked like a charm.  Hope it helps!

Original comment by julia...@gmail.com on 2 Feb 2011 at 6:14

[GoogleCodeExporter]

The way elements are positioned (position:absolute) removes them from the 
document flow and thus body gains no height. This, and not the iScroll itself, 
is what causes troubles with window.scrollTo(). 

One way to fix this is to have a min-height on body and position the footer 
-60px instead of 0px. The same goes for the scroller div that has to be 
compensated similarily.

Hope this helps.

Original comment by ant...@gmail.com on 3 May 2011 at 9:50

[GoogleCodeExporter]

...on the other hand, when changing orientation strange things can occur using 
modified body height. So a fix along the lines of comment #6 would probably be 
best.

Original comment by ant...@gmail.com on 4 May 2011 at 11:45

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

You have to follow two steps:

1)Set wrapper height:
ex. 
function loaded() {
window.scrollTo(0, 1); 
 var wrapperH = window.innerHeight;
  document.getElementById('wrapper').style.height = wrapperH + 'px';
myScroll = new iScroll('wrapper');
}

2) In Style-> set bottom= -(hight of fixed bar)
ex: #footer 
    {
    bottom:-'30px';
        }

Original comment by aishwary...@gmail.com on 3 Jan 2012 at 2:18