I have several dialogs on a web page. The code does its job but is rather jumpy and glitch. I suspect that the code is simply too heavyweight for an ipad.
$(document).on("dialogopen", ".dialogClass", function() {
console.log("dlg open");
var parent = $(this).parent();
//$(this).dialog("option", "width", $(window).width());
//$(this).dialog("option", "height", $(window).height());
$(this).dialog("option", "position", [0,0]);
$(this).dialog("option", "draggable", "false");
$(this).dialog("option", "width", $(window).width());
$(this).dialog("option", "height", $(window).height());
parent.css("width", $(window).width());
parent.css("height",$(window).height());
parent.css("position","fixed");
parent.css("top","0px");
parent.css('left','-' + $(window).width() + 'px');
parent.animate({
left: 0
}, speed, "easeOutBounce");
$(this).swipe({
swipeLeft:function(event, direction, distance, duration, fingerCount) {
if(distance >= 200){
var dia = $(this);
$(this).parent().animate({
left : -$(window).width()
},speed, "easeInExpo", function(e) {
dia.dialog("close");
});
}
}
});
});
$(document).on("dialogclose", ".dialogClass", function() {
console.log("dlg close");
//$(this).dialog("destroy");
$(this).swipe("destroy");
$(this).swipe({
swipeLeft:function(event, direction, distance, duration, fingerCount) {
if(distance >= 150){
var dia = $(this);
$(this).parent().animate({
left : -$(window).width()
},speed, "easeInExpo", function(e) {
dia.dialog("close");
});
}
}
});
});
Is jQuery simply not the right tool for handling swipes? I am using the following jQuery library: