Hiding the address bar in mobile browsers

The port of Super Star Trek [1] to an HTML 5 mobile app involves some times dealing with the fact that the app does not have full control over the device but runs inside a browser. One of the restrictions thus applied is the omnipresent address bar in the browser. For many applications that is not a problem, but in the particular case the address bar impacts the GUI in a few ways:

  • The game is meant to be playable on low-end phones (such as the target platform for Firefox OS) with small screens, hence the address bar is taking up valuable space
  • The address bar has no function whatsoever. Users can always get away by closing the browser window or navigating to one of their bookmarks
  • The GUI follows a dark theme (it’s a space game after all) but the address bar has usually a bright colour, which contrasts badly

Ideally one would hide the address bar, but that seems possible only when opening a new window [2]. The solution has been used by mobile sites like twitter and facebook and involves a simple trick: listen to scroll events on the window and object scrolling too far to the top, making sure the address bar is never visible.

The code is thusly simply (with a little help from jquery):

function repositionWindowScroll(){
   var doc = window.document;
   var delement = doc.documentElement;
   var scrollOffset = (delement && delement.scrollTop || doc.body && doc.body.scrollTop || 0);
   var top = $("#topMarkerElement").offset().top;
   if (scrollOffset < top){
        var element = $("#firstVisibleElementOnScreen");
 var offset = element.offset();
        var destination = offset.top-2;


where topMarkerElement is the upper most element on the page above which nothing should be shown and ‘firstVisibleElementOnScreen’ is something like a container for all elements after topMarkerElement


[1] Super Star Trek on github

[2] Open new popup window without address bars in firefox & IE

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.