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".


Friday, July 1, 2011

Javascript function - Replace or remove the URL parameters

Well, I've been searching some functions for handle URL parameters to replace or remove on both of javascript or jQuery. However, I didn't find any fit one. This is what I wrote for such usage:


//Handle URL parameter, if newvalue is empty, remove the parameter or replace with new value.
replaceUrlParameter = function (url, param, newvalue) {
if (url.indexOf("#")) {
url = url.split("#")[0];
}
var headUrl = url.split("?")[0];
var arrayParam = url.split("?")[1].split("&");
var idx = null;
for (i = 0; i < arrayParam.length; i++) {
if (arrayParam[i].split("=")[0] == param) {
idx = i;
}
}
if (idx != null) {
var newUrl = null;
if (newvalue != "") {
var newParam = param + "=" + newvalue;
newUrl = arrayParam.splice(idx, 1, newParam);
}
else {
var removedArray = arrayParam.splice(idx, 1);
newUrl = headUrl + "?" + arrayParam.join("&");
}
return newUrl;
}
else
{ return url; }
return url;
}