views:

463

answers:

1

I try to make a slider similar to the iPhone unlock Slider, that forwards to a linked site, when complete, and returns to its initial position when the slider wasn't dragged to the end.

This is not meant to be a iPhone webapp, i just want to put this to a general website as a effect.

So far I've tried those two tests, but i'm stuck on both.

The first is:

// First Example
var el = $('slideOne'),

// Create the new slider instance
var sliderOne = new Slider(el, el.getElement('.slider'), {
    steps: 20,  // There are 35 steps
    range: [8], // Minimum value is 8

}).set(20);

Problem here is that i can't fire an event on (0) not on (20) aswell, i tried onComplete but this fires the function immediatly after the page is load!?

The second

$$('.textslider').setStyle('opacity', 0.8);

    $('slider1').makeDraggable({
        snap: 0,
        container: 'slideOne',
        droppables: '.slidedrop1',

    onDrop: function(element, droppable, event){
        if (!droppable);
        else console.log(element, 'dropped on', droppable, location = 'index.php/kredite.html', event);
    },
});

Problem here is , that the droppable don't work as fine as i hoped, sometimes i move the the slider on the invisible droppable, which indicates if the slider is dragged to the end, and nothing happens, sometimes it works fine, i think this may be due the different position of the cursor on the slider. and i can't get it done that it is only possible to slide horizontal , since it is that drag not the slider function, so i think this won be the proper way.

On both Tests, i didn't figured out who i could return the slider back to its initial position, with a slide Effect.

Are there some mootools cracks around who maybe could help me with this? Thanks already for the great ideas of y'all.

A: 
<html>
<head>
    <script type="text/javascript"
      src="http://demos.mootools.net/demos/mootools.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
    window.addEvent('domready', function(){
     var el = $('slideOne');
     var debug = $('debug');
     var ACTIVATE_VALUE = 20;
     var mySlider = new Slider(el, el.getElement('.knob'), {
      range: [0], // Minimum value
      steps: ACTIVATE_VALUE, // Number of steps
      onChange: function(value){
       if (value == ACTIVATE_VALUE) {
        debug.setStyles({color:'green'});
        // go to url after delay
        (function(){
         location.href='http://joecrawford.com/';
        }).delay(500);
       } else {
        debug.setStyles({color:'red'});
        // if not activated, reset after 2 second delay
        (function(){
         value = 0;
         mySlider.set(value);
        }).delay(3000);
       }
       debug.set('text', value);
      }
     });
     mySlider.set(0);
    }); 
    </script>
    <style type="text/css">
    div.slider {
     width: 200px;
     height: 50px;
     background: #eee;
    }
    div.slider div.knob {
     background: #000;
     width: 50px;
     height: 50px;
    }
    div#debug {
     font-family: sans-serif;
     font-size: xx-large;
    }
    </style>
    <title>Slider that resets if it does not reach the end</title>
</head>
<body>
    <div id="slideOne" class="slider">
     <div class="knob"></div>
    </div>
    <div id="debug">-</div>
</body>
</html>
artlung
Hello artlung, thanks for your comments and answer, I just passed by as i recived the mail of an answer.Thanks a lot for your attempt, but actually, my wish was that the slider slides back, just like on the iPhone. But no worries i get help at the mooforum.net, The script is working now, more or less.How can I mark this Question as "solved"?
Marcel
You marked my answer as checked and that worked. But you can answer your own question and mark that as accepted I think. You could also edit your question and show what you ended up with.
artlung