My favorites | Sign in
Project Home Downloads Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 8: [REQ] Hide Address Bar
3 people starred this issue and may be notified of changes. Back to list
Status:  WontFix
Owner:  ----
Closed:  Jun 2010


 
Reported by microa...@gmail.com, Jun 29, 2010
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-mobilesafari/ for more detail about this trick.
Jun 29, 2010
Project Member #1 mat...@gmail.com
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.
Status: WontFix
Labels: -Type-Defect Type-Enhancement
Jun 30, 2010
#2 microa...@gmail.com
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.
IMG_0018.png
46.2 KB   View   Download
Jun 30, 2010
Project Member #3 mat...@gmail.com
In the example you mentioned the page height (not the scroller height) matches exactly the visible area, so the URL bar is not hiding.
Jun 30, 2010
#4 microa...@gmail.com
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
Feb 1, 2011
#5 a.perry...@gmail.com
Any chance this has been integrated as a built in option yet? Was just working on the same issue.

Otherwise, fantastic script! And, thanks!
Feb 2, 2011
#6 julia...@gmail.com
I just added window.scrollTo(0, 1); above the variable definitions in setHeight() and it worked like a charm.  Hope it helps!
  
May 3, 2011
#7 ant...@gmail.com
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.
May 4, 2011
#8 ant...@gmail.com
...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.
Jan 3, 2012
#11 aishwary...@gmail.com
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';
        }

Powered by Google Project Hosting