Home/ Questions/Q 8947489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:46:25+00:00

From what I assumed would be a fairly simple piece of slider code, the

  • 0

From what I assumed would be a fairly simple piece of slider code, the events simply will not fire off and its driving me crazy. Not sure what I am missing, so any help would be grand.

Troublesome page can be found here… http://ardaneworldwide.com/home2.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Ardane Worldwide</title>
        <link rel="stylesheet" type="text/css" href="slider_entry/style.css"/>
    </head>
    <body>
        <div class="wrapper">
            <img src="/slider_entry/header-bg.jpg" />
            <div id="unlock-bottom">
                <div id="slide-to-unlock"></div>
                <div id="unlock-slider-wrapper">
                    <div id="unlock-slider">
                        <div id="unlock-handle"></div>
                    </div>
                </div>
            </div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="/slider_entry/ui.core-1.5.3.js"></script>
        <script type="text/javascript" src="/slider_entry/ui.slider.js"></script>
        <script type="text/javascript" src="/slider_entry/iphone-unlock.js"></script>
    </body>
</html>

JS

$(document).ready(function(){
    $("#unlock-slider").slider({
        handle: "#unlock-handle",
        animate: true,
        slide: function(e,ui){
            $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120));
        },
        stop: function(e,ui){
            if($("#unlock-handle").position().left == 205){
                window.location="index.php";
            }
            else {
                $("#unlock-handle").animate({left: 0}, 200 );
                $("#slide-to-unlock").animate({opacity: 1}, 200 );
            }
        }
    });
});

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See here: http://jsfiddle.net/vdxWm/

    To get the slide and stop functions to fire, you need to update to a more recent version of jquery ui/slider.

    The latest version of slider doesn’t allow you to override the handle element, so you can either style against that, or use some code to adjust your custom handle’s position as I’ve done below. 

    $("#unlock-slider").slider({
    animate: true,
    slide: function(e,ui){
        var han = $("#unlock-handle"),
            con = $("#unlock-slider"),
            left = (con.width() - han.width())/con.width() * ui.value + '%';

        han.css('left', left);

        $("#slide-to-unlock").css("opacity", 1-(parseInt($("#unlock-handle").css("left"))/120));
    },
    stop: function(e,ui){
        if($("#unlock-handle").position().left == 205){
            //window.location="index.php";
            console.log('done');
        }
        else {
            $("#unlock-handle").animate({left: 0}, 200 );
            $("#slide-to-unlock").animate({opacity: 1}, 200 );
        }
    }

});
    • 0