jQuery UI and touch screens
Monday 17 September 2012
I really like using jQuery UI in my web applications. But even though jQuery UI is very well tested there are some potential issues to keep in mind. One of those is using the jQuery UI controls on touch devices like the iPad. With these touch enabled devices becoming more and more popular support is quite important if you don’t know you exact client configuration. And for that matter, even if you client has standardized on a specific browser, let say Internet Explorer 9 for example, you may notice that there are in fact lots of other “unofficial” devices being used.
The reason jQuery UI doesn’t always work out of the box is because they use the mouse events. And on most cases a touch event also raises a mouse event but not quite always. For example take a look at the Draggable demo on an iPad. It works perfectly with a mouse but with an iPad all you do is drag the whole browser window.
The solution is rather simple: In the case of a touch event make sure this also raises the appropriate mouse event. There are a number of jQuery plugins that will do this for you. In this example I used jQuery UI Touch Punch which works really well and is simple to add.
Try for yourself
I have created a small demo page here. You can toggle the support for touch events using the button to try both with and without support for touch.