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?

Dan Murfitt's picture

I just visited http://jqueryui.com/draggable/ on my iPhone and I couldn't drag the box around, so I'm guessing 'draggable' support still isn't native to jQuery UI unfortunately.

Many thanks, Dan

it is not working on jquery 1.10

Dan Murfitt's picture

I had a look and couldn't see any issues on GitHub relating to 1.10, but the example code references 1.8.17 so maybe it hasn't been fully tested with this version yet. It might be worth raising an issue on GitHib for compatibility with 1.10 at https://github.com/furf/jquery-ui-touch-punch/issues

Many thanks, Dan

I have these references for my script code behind my slider test page:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="Scripts/jqueryv1.10.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>

Everything work's fine with my slider with just these scripts. However if I add the UI references I need for the touchscreen:

    <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>
 
    <script src="Scripts/jquery.ui.touch-punch.min.js"></script>

The slider functionality breaks, with the 'handle' just floating away from it's slider 'slot' when moved with a mouse, instead of sliding.

It seems that any three of these three lines will just cause the page to no longer function. I have even added the dependencies before the touch-punch library line like so

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

But still no luck! I'm an experienced programmer, but a bit of a newb to JQuery, and would appreciate you help.

The test page is here: http://www.xvams.com/xvams/jstest.aspx

Thanks

Dan Murfitt's picture

Hi Paul,

I just tested your test page on Safari (iOS and Mac) and Chrome for Mac and the slider didn't seem to break? If it's still breaking you could try using a previous version of jQuery. It doesn't look like the touch punch library has been updated for some time (~2 years) so it may be that it's not fully compatible with the latest jQuery.

I hope this helps, Paul. Thanks for dropping by :)

Dan

Add new comment