Add option to enable/disable URL bar hiding

[benoitletondor]

I'm opening a ticket to fully explain my issue using the new bar hiding feature on iOS. I want to create a UI which look like a classic iOS/Android app : a fixed navigation bar on the top, the scrollable content at the center, and a fixed tabbar at the bottom.

I use a fixed header and footer with data-position="fixed", and my central content is in a div with a fixed height and an overflow:scroll css property. The issue is the following :

At the beginning the app look like this on Safari (iOS 5 beta 1 / iOS 4.3.3) :
http://dl.dropbox.com/u/14316834/jquery/1.PNG

So the UI look great and the app look exactly the way she should, but if I scroll down by touching the header or footer or when the central content is at the bottom, this is what append :
http://dl.dropbox.com/u/14316834/jquery/2.PNG

Immediatly after that the footer come back to the bottom but my central content doesn't ajust his own height so there is a blank between the footer and the content.

The same problem but inverted come when i scroll the app to the top to show the adress bar, the footer replace itself at the bottom but hide the bottom of the central content.

My proposition is the following : Make the new bar adress hiding feature an option that can be disabled.

[toddparker]

Using fixed positioning works only in Android 2.2+ and iOS 5 beta but I'm guessing you know that already. In any case, how do you deal with all the various screen sizes and orientation change if you're setting a fixed content area size? If you want something that looks like native fixed toolbars, you unfortunately need to use a momentum scroller script, script the height of the body and understand that this will cause usability issues on many platforms and devices. That's why we've been waiting to see if mobile browsers will add support for position fixed and overflow properties (they are) before we added all this overhead.

I agree that we may want to make this feature disabled as an option, I'm just not sure if this will solve all your issues. It seems like you'd want a hidden URL bar precisely in a situation where you'r eating up all that real estate with fixed toolbars.

[benoitletondor]

I know that fixed positioning is only working on the lastest iOS (beta)/Android, it's not an issue for me because all the scrolling is on the center content. Plus, i'm only targeting iOS 4+ and Android 2.2+.

I'm using iScroll to deal with the scrolling on older OS and it work good. I set the size of the content area dynamically using JS : $(window).height(); and updating the size on every orientation change, so this is working perfectly.

Actually, my issues come with the new adress bar hiding feature which is great but not for my app. In fact, it would be perfect if the adress bar could be hidden but I don't think it's possible with what I want to do.

Anyway, if you make this feature an option, it will solve my issues (at least a part of it ^^) and it will be perfect for me.

Thanks for your answer ;)

[scottjehl]

Hi benoitletondor. Can you clarify which feature you're referring to here? We don't have any options specifically for hiding the address bar in our current release. In beta 1, we had a useFastClick option, which always kept the address bar hidden as a biproduct of its touch event usage, but we had to back that feature out due to all sorts of problems it caused with inconsistent handling of touch and mouse events on different platforms.

Anyway, I'm just unsure of which feature you're asking us to make optional. If it's the one I referred to above, I think it's already removed. let us know!

[benoitletondor]

Hi,

The issue (even if, again, it's not really an issue) is :
http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/

KEY CHANGES
URL bar: Now hidden in iOS and Android

If this feature could be an option, it would help me. Maybe this is already removed, i have to admin I don't have the time to check it right now.

Anyway, thank for spending time on this ;)

[toddparker]

So you're requesting a feature to NOT hide the URL on iOS/Android? If so, please add a link this ticket to the feature request page in the Git wiki and close this. We'll re-open if/when we add it.

[scottjehl]

So, there's two parts to this.

1. We scroll to 0,0 (0,1 in Android) to "hide" the address bar at page load. We also have logic to maintain a minimum page height as tall as the screen, so that when the address bar does show after clicking a link, it overlaps the page rather than pushing it down.
2. In beta 1, we used touch events to prevent the address bar from ever showing up during clicks as well, but that feature was removed due to conflicts.

So, given this description, #1 is the only part still present in our build. Is that the part you want to make optional?

[benoitletondor]

Exactly, this is the #1 that I would like to see optional.

[toddparker]

Thanks, added to the feature request wiki:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests