The most annoying thing about the web app was the rubber-banding vertical scrolling which moved the screen up and down. This was particularly annoying for the drums and the ethnic instruments selection screen, so it needed to be fixed. The only way to fix it was using code, so with the help of like-minded questioners, there was a forum with the code to do it.

<meta name=”viewport” content=”user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0″>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”format-detection” content=”telephone=no”>

It did not say where to put it though, as the advice was not made for Hype, so we just threw it in the header. Sadly, this didn’t fix anything so we had to use jquery and some javascript to make it work.

Using the following code in the head HTML, we were able to import jquery into the document.

By completely guessing about adding code to the “document” element, we just threw the javascript function onto a “on layout load” and hoped for the best.

Screen Shot 2016-11-15 at 1.24.57 pm.png

Inside the javascript function was just a small line of code, which can be seen below.

$(document).bind(‘touchmove’, false);

It was only applied to the boot up screen and by some miracle, it actually worked! Even on every other page!