Handy Javascript/jQuery UI solutions for Mobile Devices

September 5, 2012
blog author


Team Lead

Recently I have been working a lot with websites built for mobile and tablet devices. Making sure a website or application is supported on full screens or landscape versions all require a bit of trial and error. Here are some of the problems and solutions that I have encountered.

Scroll bars don't work in Android!

Problem: I have an "overflow: auto" div and scrolling does not on my android device. The div is hidden on page load, so I think the device cannot determine it can scroll.

Solution: Used a simple javascript function to allow scrolling on touch devices. Very simple to apply and did not encounter any problems. http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Stretch my website to fit all mobile devices!

Problem: The large image in the middle of the screen should stretch the height of my device, while keeping my header and footer visable.

Solution: Used custom jquery to solve this. First I get the height of the device from the outer height of the body. Then I want to minus the height of the footer and header to get the remaining height of the device. With that height I will set my image to that height so the user will not have any scrollbars vertically and everything fits on the screen like a native app. Calculating this everytime the window resizes will support turning the phone from portrait to landscape. Encountered an issue with body height, make sure you set html, body { height: 100%; } to get this working.

$(window).load(function() {

$(window).resize(function() {

function setImageSize() {
  $bodyHeight = $('body').outerHeight();
  $headerHeight = $('#header').outerHeight();
  $footerHeight = $('#footer').outerHeight();
  $imageHeight = $bodyHeight - $headerHeight - $footerHeight;

Default Google Maps boxes are ugly!

Problem: I wanna be able to theme the popup box when clicking on a google marker on a google map.

Solution: I used a javascript plugin called InfoBox. The api can be found here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html. I used a lot of css overriding to get it to look properly and it worked fine in the end. Some issues I encountered were that I could not get their "boxClass" option to work which was suppose to put a class name for me. So I had to work around that by putting in the inline styles in the options "boxStyle." Beware that you have use one word styling instead of the standard "-" eg. borderRadius: "5px." Another problem that arise was it did not work in IE7, I spent a while to figure this one out and the solution was to set the opacity, by default it was setting it to 0. Here is some of the code I used and a screenshot of the end result.

var myOptions = {
  content: bodycontent,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(35, -68),
  zIndex: null,
  boxStyle: {
    padding: "5px",
    background: "#FFFFFF",
    width: "220px",
    borderRadius: "5px",
    boxShadow: "0px 0px 10px 2px #555",
    opacity: 1
  closeBoxURL: "",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false

var ib = new InfoBox(myOptions);


gmap InfoBox


I wanna make the worlds bestest and largest menu eva!

Problem: I want a menu that drops down when you hover over elements and goes through 3 tiers.

Solution: I have tried a lot of these menu dropdowns and have even built my own. In this case I was working with Drupal, so I went with Superfish module. It worked well out of the box. Currently I would suggest this if you are looking for some sort of simple drop down menu. We use the module Features and it was easily exportable. My only complaint was CSS, overriding was a fair bit of work to get it to follow the mocks.