I've implemented an Iris Colour Picker into the front-end of my theme thanks to the help provided in this question and all works well on the desktop front. However, it seems as though when it comes to an iPad device the colour picker doesn't work as expected. The mouse dragging event isn't being recognised, however clicking around the colour area works, it's like the mousedrag event isn't being recognised.

Is this a known issue and is there perhaps a way I can duckpunch the functionality into the colour picker?

1 Answer 1


After a bit of investigation, the following code will add touch events to the Iris picker which uses jQuery UI. I did have to make the color picker handle 25px x 25px so it's easier to grab on an iPad, but other than that this works:

        touchstart: touchHandler,
        touchmove: touchHandler,
        touchend: touchHandler,
        touchcancel: touchHandler

    function touchHandler(event) {
        // trick to add support for touch event to elements/widgets that do not support it 
        // by convetting convert touchevents into mouseevents

        // only apply this trick to ui-draggable elements
        if ( ! $(event.target).hasClass('ui-draggable') ) { 

        var touches = event.changedTouches,
            first = touches[0],
            type = ""; 

        switch(event.type) {
            case "touchstart": type = "mousedown"; break;
            case "touchmove":  type="mousemove"; break;    
            case "touchend":   type="mouseup"; break;
            default: return;

        // convert touchevents into mouseevents
        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                  first.screenX, first.screenY,
                                  first.clientX, first.clientY, false,
                                  false, false, false, 0/*left*/, null);


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.