Question

I have a jquery plugin that i’m working with for a website and I had a quick question… It’s a “slide to unlock” plugin that looks just like the iPhone… I was wondering how I would allow people to slide the unlock button and then be forwarded to a link upon completion of slide… Here’s the sourcecode I’m working with:

$(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
            })
        }
    }
});

$('#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);

});

thanks in advance for the help, I’m not quite a javascript expert but I think it needs be after $("#well").fadeOut(); ?

Answer 1

You said you have a link – assuming you do:

$("#well").fadeOut('fast',function(){
    window.location = $('#myLink').attr('href');
});

If you just want to redirect to a url:

$("#well").fadeOut('fast',function(){
    window.location = 'http://www.foobar.com';
});