Blog

WKTouch - Multi-touch JavaScript plugin for Apple iOS

19 July 2010 | 7:53 pm |

I've just released a little JavaScript plugin called WKTouch up on Google Code. It's a tiny plugin for Apple's iOS Safari browser, enabling multi–touch drag, scale and rotate on HTML elements.

Using the plugin is pretty simple. Firstly, include the main JavaScript file in the header of your HTML document:

<script type="text/javascript" src="WKTouch.js" ></script>

Next, add the following CSS to your stylesheet. Please note, your HTML element must use absolute positioning:

.touch {
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none; 
}

#element1 {
    position: absolute;
    left: 10px;
    top: 10px;
    height:120px; 
    width:120px;
    background-color: blue;
}

Now add the class name and id to your HTML element:

<div class="touch" id="element1"></div>

Finally, in the head of your HTML file, include the following JavaScript to create a new instance of the plugin, making sure to pass it the id of your HTML element:

<script type="text/javascript"> 
window.onload = function() {                     
    var element1 = new WKTouch('element1').init();       
};
</script>

That's it! You can view a fully working online demo here using multiple instances of the plugin on one page. You can also download or checkout the source over on Google Code.