Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Slide To Unlock

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #35416
    joeweb
    Member

    Hello
    this example
    https://css-tricks.com/examples/SlideToUnlock/
    apprer you drag the button
    I want to be heading to a page on my site
    Here is the html y js code
    ………………………………..
    HTML code
    ……………………………………….






    Slide To Unlock














    slide to unlock











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

    });

    …………………………………………………
    Can you help me
    THANK YOU

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.