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