Quick Javascript redirect question

chriscct7 · 07-21-2011, 07:24 PM

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);

});