Thursday, September 29, 2011

jQuery UI slider twisting for both iPad and iPhone, or any tablet.

I was working for improving our slider to be avaiable for both iPad and iPhone, however, from the reference of official jQuery UI, it addressed to target only for iPhone(http://bugs.jqueryui.com/ticket/4143). The one (http://bugs.jqueryui.com/ticket/7001) targeting to iPad is using the same of iPhone. It words well with iPhone but not iPad. By checking the code, I found it is a small trick to adjust the code to work for both of them or even more. Here follows the solution.

You want to first put code change as cscott's post first (https://github.com/cscott/jquery-ui/commit/3744712e13271fa06a502be19bb8b3854fe66c59) , then modify the code of file (jquery.ui.mouse.js or ui.mouse.js), finding the following one (around line No. 17th) and do following 2 steps:
Step 1. Modify code:
(deleted) var iPhone = (navigator.userAgent.indexOf('iPad') != -1);
(added) var iPhonePad = (navigator.userAgent.indexOf('iPad') != -1) ||(navigator.userAgent.indexOf('iPhone') != -1);

Step 2. Replace all the keyword "iPhone" to "iPhonePad".