Trying to get rid of the address bar when using ChocolateChip-UI

Question

I've been using ChocolateChip-UI (http://www.chocolatechip-ui.com/) for a couple of days, and really like the way it manages to map the look to established mobile standards.

One problem I have with adapting my site to CC-UI has been my inability to make the address bar on scrolling. I tried everything, including meta tags, or even the hack with scrolling to 1px at onLoad. Nothing worked. As you can see, even the demo they have does not seem to make the address bar disappear.

How can I fix this? I really need those 40-50px on the top. I think that the address bar, especially on iOS older than v7, breaks the consistency of the design, and consequently lowers the attention of the user

Answer 1

There is a discussion about this in the CHUI Google Group. You can reach it here: https://groups.google.com/forum/#!topic/chocolatechip-ui/XOr7b8HGNK8

From Robert Biggs answer on this

$('body').addClass('hideGlobalNav');
Then have some CSS in your document's header for a custom style:

body.hideGlobalNav #global-nav {
    display: none !important;
}
body.hideGlobalNav #articleWithoutGlobalNav {
    top: 0 !important;
}

Then, you'd need to remove that class from the body tag when the user navigates away. I'm not sure how the navigation is set up in your app, whether the user leaves by going back or forward, but you can handle that in several ways. You can add event listeners for navigation and when the user is leaving #articleWithoutGlobalNav, then you would remove 'hideGlobalNav' from the body tag. You could do something like this:

$('article').on('navigationend', function(e) {
   // e.target is the current article that loaded
   if (e.target.id === 'articleWithoutGlobalNav') {
 $('body').addClass('hideGlobalNav');
   } else {
          $('body').removeClass('hideGlobalNav');
   }
})