For some reason, on ipad, my transitions in a jquery slide between pages work fine when the [slide] scrolls by default. But when it scrolls to the right (slide-reverse), apparently, between the pages during the transition there is a complete blank white page .
<div data-role="page" id="zine1">
<div data-role="content">
VARIOUS HTML CONTENT
</div>
</div>
<div data-role="page" id="zine2">
<div data-role="content">
VARIOUS HTML CONTENT
</div>
</div>
<div data-role="page" id="zine3">
<div data-role="content">
VARIOUS HTML CONTENT
</div>
</div>
<script>
$(document).ready(function() {
window.now = 1;
windowMax = $('div[data-role="page"]').length;
doBind();
});
function doBind() {
$('div[data-role="page"]').live("swipeleft", turnPage);
$('div[data-role="page"]').live("swiperight", turnPageBack);
}
function doUnbind() {
$('div[data-role="page"]').die("swipeleft", turnPage);
$('div[data-role="page"]').die("swiperight", turnPageBack);
}
function turnPage(){
if (window.now < windowMax) {
window.now++
$.mobile.changePage("#zine"+window.now, {transition:"slide"});
}
}
function turnPageBack(){
if (window.now != 1) {
window.now--;
$.mobile.changePage("#zine"+window.now, {transition:"reverse slide"});
}
}
</script>
source
share