Hi,
Ever seen on the iphone where you have to slide the slider across the screen to unlock it? I have a duplicate of this using javascript but no matter what I try I cannot make it redirect. I want the page to be redirected after the slider has gone to the other side.
Heres the HTML
Code:
<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<title>Slide To Unlock</title>
<link rel='stylesheet' href='css/style.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='js/slidetounlock.js'></script>
</head>
<body>
<div id="page-wrap">
<div id="well">
<h2><strong id="slider"></strong> <span>slide to unlock</span></h2>
</div>
</div>
</body
</html>
And the javascript
Code:
$(function() {
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
$("#well").fadeOut();
} else {
// Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
// $("h2 span").css("opacity", 100 - (ui.position.left / 5))
}
},
stop: function(event, ui) {
if (ui.position.left < 551) {
$(this).animate({
left: 0
})
}
}
});
// The following credit: http://www.evanblack.com/blog/touch-slide-to-unlock/
$('#slider')[0].addEventListener('touchmove', function(event) {
event.preventDefault();
var el = event.target;
var touch = event.touches[0];
curX = touch.pageX - this.offsetLeft - 73;
if(curX <= 0) return;
if(curX > 550){
$('#well').fadeOut();
}
el.style.webkitTransform = 'translateX(' + curX + 'px)';
}, false);
$('#slider')[0].addEventListener('touchend', function(event) {
this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
this.style.webkitTransform = 'translateX(0px)';
}, false);
});