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;
$(document).scrollTop(destination);
}
}

$(window).scroll(repositionWindowScroll);

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

Resources

[1] Super Star Trek on github
https://github.com/ggeorgovassilis/superstartrek

[2] Open new popup window without address bars in firefox & IE
http://stackoverflow.com/questions/2909645/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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s