jQuery UI touch support for iPad and other tablets and smartphones

jQuery UI Logo

The jQuery UI library doesn’t support touch features by default, so trying to use the slider or drag and drop on the iPad won’t work. Fortunately, all that’s required to get this working is a small hack - enter jQuery UI Touch Punch.

Just include jQuery and the jQuery UI scripts on your page as per normal:

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

Then include the jQuery UI Touch Punch library:

<script src="jquery.ui.touch-punch.min.js"></script>

That’s it. The existing jQuery UI elements on your page should now work on the iPad, iPhone or any touch screen tablet or smartphone.

There are examples on the jQuery UI Touch Punch website so you can test some of the jQuery UI elements out on your device first.

For more information, or to download the plugin, visit: http://touchpunch.furf.com

Comments

Helps me a lot, thanks!

Dan Murfitt's picture

You're welcome - glad it helped :)

Dan

Thank you so much!! Very good!

Hello, m using jQuery UI touch support for iPad and other tablets and smartphones. Its not working see html here.

     <!DOCTYPE html>
 
        <html>
        <head>
           <meta charset="utf-8" />
          <title>jQuery UI Draggable - Default functionality</title>
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
          <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
        <script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
          <style>
          #draggable { width: 150px; height: 150px; padding: 0.5em; }
          </style>
          <script>$(function() {$('#draggable').draggable();});</script>
        </head>
 
        <body>
 
        <div id="draggable" class="ui-widget-content">
          <p>Drag me around</p>
        </div>
 
        </body>
 

Dan Murfitt's picture

Hi Rohit,

Does it work when you access the main website?

http://touchpunch.furf.com/

There is an example of it there which should work on tablets / smart phones. You shouldn't have to make any changes to your code, other than include a link to the touch punch JS library.

Many thanks, Dan

Do we also need it for the latest jquery ui 1.10?

Add new comment