JQuery UI and JQTouch

On a current project I wanted to use the JQuery UI Slider in a JQTouch project. Turns out that Mobile Safari rewires all of the standard JS events. Think about it. A standard mouseDown event on mobile device has more implications. Did a user want to drag an element? Did they want to scroll the page? Did they want want to pinch zoom? It’s hard for mobile Safari to tell. From a quick look at the Apple Developer site it appears that Mobile Safari “flattens” all the mouse events into a single action. When you tap and lift your finger mobile Safari fires mouseOver, mouseMove, mouseDown, mouseUp and click. At this point you’ve lifted your finger and your drag action isn’t really going to work.

After a search I ran across a few fixes for this. Here’s a link to one

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

This seemed to work well, though it had the problem of also nixing touch scrolling in my project. Since all of the mouse events were now rewired Mobile Safari was not getting the events it needed to scroll with a swipe.

Looking under issues on the Google Project site I found a few people had asked about this. The author had posted a fix which seemed to work well.

Leave a Reply

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