Skip to content

anonymous /index.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
on iOS6 jQuery.animate fails on an element after touchmove listener is called without e.preventDefault
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en-US"><!--<![endif]-->
<head>
<title>iOS 6 jQuery Animate Failure</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css">
.pagewrap { width:940px; margin:0 auto;}
#swipebox {
width:100%; height:300px;
position:relative;
overflow:hidden;
}
#swipebox img {
position:absolute;
top:0; left:0;
}
.fillerbox {
padding:200px 100px;
font-size:28px;
color:#fff;
background-color:blue;
text-align:center;
font-family:sans-serif;
margin:0 auto;
}
.fillerbox ul {
text-align:left;
}
</style>
</head>
<body>
<div class="pagewrap">
<div class="fillerbox">
In iOS6 Mobile Safari
<ul>
<li>Swipe picture below left/right and notice how it animates back to the left edge</li>
<li>Touch the picture and scroll the page up/down</li>
<li>Repeat left/right swipe and notice the picture does NOT animate back to the left edge</li>
<li>It appears jQuery animate fails after touchmove occurs without e.preventDefault</li>
</ul>
</div>
<div id="swipebox">
<img src="http://i.imgur.com/ktKLI.jpg" alt="" />
</div>
<div class="fillerbox">This box is only here to make the page large enough to scroll</div>
</div><!-- .pagewrap -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
/* The goal of this code is to create a horizontal javascript scrollable image in #swipebox
* In addition to the horizontal javascript controlled scrolling
* If the user wants to scroll the page vertically by clicking on the image and
* dragging up/down, I want this behavior to pass through
* For example, on a small screen the image may take up the entire area and strand
* the user on that part of the page
*/
var el = document.getElementById("swipebox"),
$slider = $('#swipebox').find('img'),
startX, startY, dx, dy,
startLeft,
animateH = false,
animateV = false;
var onTouchStart = function(e) {
startLeft = parseInt($slider.css('left'), 10) || 0;
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
};
var onTouchMove = function(e) {
dx = e.touches[0].pageX - startX;
dy = e.touches[0].pageY - startY;
if (
animateH ||
(!animateV && Math.abs(dx) > 5)
) {
// prevent default, we are scrolling horizontally,
animateH = true;
$slider.stop().css({'left': startLeft+dx*2});
e.preventDefault();
} else if (Math.abs(dy) > 5) {
// do NOT prevent default, we are scrolling the page vertically
animateV = true;
} else {
// direction of scroll is undetermined at this time
// we've moved less than 5px in any direction
e.preventDefault();
}
return false;
};
var onTouchEnd = function(e) {
$slider.stop().animate({'left': 0}); // animate image back to left
e.preventDefault();
animateH = false;
animateV = false;
};
var onTouchCancel = function(e) {
console.log('onTouchCancel');
};
el.addEventListener('touchstart', onTouchStart, false);
el.addEventListener('touchmove', onTouchMove, false);
el.addEventListener('touchend', onTouchEnd, false);
el.addEventListener("touchcancel", onTouchCancel, false);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.