cool counter with controls

http://cnanney.com/journal/demo/apple-counter-revisited/

by ecartdk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css">
<script src="http://cnanney.com/journal/demo/apple-counter-revisited/js/flipcounter.js"></script>
    <div class="explain">
        <p>This counter was initialized with the following code:</p>
        <code>var myCounter = new flipCounter('flip-counter', {value:000, inc:1, pace:1000, auto:true});</code>
        <p>Use the controls below to make changes to the counter using built-in methods.</p>
    </div>
    <div id="wrapper"><div id="flip-counter" class="flip-counter"></div></div>


    <div class="clear"></div>
    <ul id="demo_controls">
        <li class="auto_on_controls">Increment: 
            <span id="inc_value">1</span> <a href="#" class="expand">[?]</a><div id="inc_slider" class="demo_widget"></div>
            <div class="explain toggle">
                <p>This slider controls the counter increment by using the <b>setIncrement</b> method:</p>
                <code>myCounter.setIncrement(value);</code>
            </div>
        </li>
        <li class="auto_on_controls">Pace: 
            <span id="pace_value">1000</span>ms <a href="#" class="expand">[?]</a><div id="pace_slider" class="demo_widget"></div>
            <div class="explain toggle">
                <p>This slider controls the counter pace by using the <b>setPace</b> method:</p>
                <code>myCounter.setPace(value);</code>
            </div>
        </li>
        <li>Auto-Increment: <a href="#" class="expand">[?]</a>
            <div id="auto_toggle" class="demo_button">
                <input type="radio" id="auto1" name="auto" value="on" checked="checked" /><label for="auto1">On</label>
                <input type="radio" id="auto2" name="auto" value="off" /><label for="auto2">Off</label>
                <button id="counter_step">Step</button>
            </div>
           ...

CSS

body{font-family:verdana} p{line-height:16px;margin:0 0 5px} #wrapper{float:right;position:relative;left:-50%;margin-top:30px} #flip-counter{position:relative;left:50%;clear:both} .clear{clear:both} #demo_controls{padding:0;width:700px;margin:20px auto;list-style-type:none} #demo_controls li{width:700px;text-align:center;margin:0 0 20px;font-weight:bold;font-size:13px} .demo_widget{width:700px;margin-top:10px} .demo_button{margin-top:10px} .auto_off_controls{display:none} a.expand:link, a.expand:visited, a.expand:active, a.expand.hover{text-decoration:none;font-size:10px;color:#aaa} a.back:link, a.back:visited, a.back:active, a.back.hover{text-decoration:underline;font-size:10px;color:#333;display:block;margin-top:4px} .explain{width:680px;margin:10px auto 0;padding:10px;font-weight:normal;font-size:12px;background:#eee;border:1px solid #666;text-align:center} .toggle{display:none} code{font-weight:bold;margin:0 0 5px;display:block}

.flip-counter ul.cd{float:left;list-style-type:none;margin:0;padding:0} .flip-counter li{background:url(http://cnanney-files.s3.amazonaws.com/journal/apple-counter-revisited/digits.png) 0 0 no-repeat} .flip-counter li.t{background-position:0 0;width:53px;height:39px} .flip-counter li.b{background-position:0 0;width:53px;height:64px} .flip-counter li.s{background-position:-53px -1030px;width:14px;height:103px}

JavaScript

$(function(){
        

        // Initialize a new counter
        var myCounter = new flipCounter('flip-counter', {value:0000, inc:1, pace:1000, auto:true});


        /**
         * Demo controls
         */
        

        var smartInc = 0;
        

        // Increment
        $("#inc_slider").slider({
            range: "max",
            value: 1,
            min: 1,
            max: 1000,
            slide: function( event, ui ) {
                myCounter.setIncrement(ui.value);
                $("#inc_value").text(ui.value);
            }
        });
        

        // Pace
        $("#pace_slider").slider({
            range: "max",
            value: 1000,
            min: 100,
            max: 2000,
            step: 100,
            slide: function( event, ui ) {
                myCounter.setPace(ui.value);
                $("#pace_value").text(ui.value);
            }
        });
        

        // Auto-increment
        $("#auto_toggle").buttonset();
        $("input[name=auto]").change(function(){
            if ($("#auto1:checked").length == 1){
                $("#counter_step").button({disabled: true});
                $(".auto_off_controls").hide();
                $(".auto_on_controls").show();
                

                myCounter.setPace($("#pace_slider").slider("value"));
                myCounter.setIncrement($("#inc_slider").slider("value"));
                myCounter.setAuto(true);
            }
            else{
                $("#counter_step").button({disabled: false});
                $(".auto_off_controls").show();
                $(".auto_on_controls").hide();
                $("#add_sub").buttonset();
                $("#set_val, #inc_to, #smart").button();
                myCounter.setAuto(false).stop();
            }
        });
        $("#counter_step").button({disabled: true});
        $("#counter_step").button().click(function(){
            myCounter.step();
            return false;
        });
        

  ...