[Pro] Count up to number

Hi everyone,
hope someone can help me out on this one as my codingskills are practically zero.

For a website a client asked me to integrate a counter that counts up to a specific number in a certain period of time.
Kind of an example is used here: http://jaarverslag.zonnebloem.nl

Now I found an article of how to achieve this with pasting some code here and there here: Edit fiddle - JSFiddle - Code Playground

Problem is I have no idea of where to paste which code…:frowning:

regards,

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Firstly you want to include the jQuery call and the styles for the counter (adjust to the look of your counter) - use Page>Html Markup and paste the following in the before end head section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.timer{width:200px; margin:20px auto;text-align:center;display:block;font-size:20px}
</style>

Next place the code for the actual counter on the page using Insert>Markup item and paste in the following

<span class="timer"></span>

OK the dialogue and position where you want it to appear on your FW page

Lastly go to Page>Html Markup and paste the following into the before end body section

<script type="text/javascript">//<![CDATA[ 
$(function(){
(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };

    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);

jQuery(function($) {
        $('.timer').countTo({
            from: 50,
            to: 2500,
            speed: 5000,
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });
});//]]>  

</script>

Adjust the parameters to suit your needs

NOTE - because this uses jQuery it is advised that you do not use this script on a page where you are using native FW actions as you may get a conflict.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave,
thanks for this completely clear info. Looks like even I can set it up :slight_smile:

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options