jquery visitors flip counter like digital clock


I was visiting a website called stepout.com. I came across this members counter which seem to be pretty cool. So here i explain it for you, how it is done.

Step-1 : We start by adding some jquery plugins and css to our page

 <!-- jQuery from Google CDN, REQUIRED -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- My flip counter script, REQUIRED -->
    <script type="text/javascript" src="js/flipcounter.min.js"></script>
    <!-- Style sheet for the counter, REQUIRED -->
    <link rel="stylesheet" type="text/css" href="css/counter.css" />

    <!-- jQueryUI from Google CDN, used only for the fancy demo controls, NOT REQUIRED for the counter itself -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <!-- Style sheet for the jQueryUI controls, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" />
    <!-- Style sheet for the demo page, NOT REQUIRED for the counter itself -->
    <link rel="stylesheet" type="text/css" href="css/demo.css" />

Step-2 : Next job is to put some div tags where it will be displayed

<li>Increment:
            <span id="inc_value">123</span> <a href="#">[?]</a><div id="inc_slider"></div>
            <div>
                <p>This slider controls the counter increment by using the <b>setIncrement</b> method:</p>
                <code>myCounter.setIncrement(value);</code>
            </div>
        </li>

Step-3 : Our next job is to have some javascript customization

<script type="text/javascript">
    //<![CDATA[

    // Initialize a new counter
    var myCounter = new flipCounter('counter', {value:10000, inc:123, pace:800, auto:true});

    $(function(){

        /**
         * Demo controls
         */

        var smartInc = 0;

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

        // Pace
        $("#pace_slider").slider({
            range: "max",
            value: 800,
            min: 100,
            max: 1000,
            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;
        });

        // Addition/Subtraction
        $("#add").click(function(){
            myCounter.add(567);
            return false;
        });
        $("#sub").click(function(){
            myCounter.subtract(567);
            return false;
        });

        // Set value
        $("#set_val").click(function(){
            myCounter.setValue(12345);
            return false;
        });

        // Increment to
        $("#inc_to").click(function(){
            myCounter.incrementTo(12345);
            return false;
        });

        // Get value
        $("#smart").click(function(){
            var steps = [12345, 17, 4, 533];

            if (smartInc < 4) runTest();

            function runTest(){
                var newVal = myCounter.getValue() + steps[smartInc];
                myCounter.incrementTo(newVal, 10, 400);
                smartInc++;
                if (smartInc < 4) setTimeout(runTest, 10000);
            }
            $(this).button("disable");
            return false;
        });

        // Expand help
        $("a.expand").click(function(){
            $(this).parent().children(".toggle").slideToggle(200);
            return false;
        });

    });

    //]]>
    </script>
</body>The original tutorial of this post can be found here http://cnanney.com/journal/code/apple-style-counter/ which was written by

13 thoughts on “jquery visitors flip counter like digital clock

  1. Guys,
    great resource thanks!
    I just upgraded it in order to display the counter smaller.
    1) add a parameter “factor” to the constructor –> set 0.5 to display it twice smaller.
    2) apply it line 29: var tFrameHeight = 39*factor, bFrameHeight = 64*factor, frameWidth = 53*factor
    3) update the css in order to correct widths and heights + add a background-size property to all .li styles –> background-size: Npx Mpx
    Example: for factor = 0.5:

    li.t{background:url(../img/digits-top.png) 0 0 no-repeat;background-size:80px 195px;width:26.5px;height:19.5px}
    li.b{background:url(../img/digits-bottom.png) 0 0 no-repeat;background-size:106px 320px;width:26.5px;height:32px}
    li.s{background:url(../img/comma.png) 1px 37px no-repeat;background-size:3px 6px;width:6px;height:50px}

  2. If we wanted to get the value from a database using ajax, what would be the process? it would help in displaying live numbers instead of just some random stuff. So for example, the values in the database are constantly changing and an ajax refresh could just update the graphics. Example a real vote counter for example or a charity pool showing how much money has been collected in real time rather than a fake counter?

  3. hello! thanks for great script! i have a questions
    if i insert my external variable on start counter
    how i reload the script for reader new real increment?

    thanks!

  4. Hello. Its a great Script, Thank you so much….
    How to setup this script to display on my site in real time registered users. If someone new register I need counter to go +1 automaticly without refresh page.
    Thanks in advanced!

  5. Hi
    set up this flip visitor counter in my website

    Actually i uploaded the script in public html

    then I place step 1 Codes in my header file below head section

    then I place step 2 Codes in the place where counter as to appear.

    further i don’t know what to do ?

    even i don’t know whether above step are correct or not
    please help me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s