jQuery UI and touch screens

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 problem

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

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.

 

Enjoy!

2 thoughts on “jQuery UI and touch screens

  1. @Grwg,

    This is depended on the browser and doesn’t work everywhere. It works on my iPad and some Android devices but doesn’t work very well on my Windows Phone 7 either.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>