StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJquery countup plugin using "jQuery Boilerplate"
text
Body
copied!<p>I'm new to Jquery plugin creation. Following jquery plugin is created using jQuery Boilerplate. It just do a count-up and notify when count-up finished.<br> I want to have a function to restart count-up by setting counter to 0; I dont understand how to call that reset function</p> <pre><code> ;(function ( $, window, undefined ) { var pluginName = 'countup', document = window.document, defaults = { countSince: new Date(), countUpTo:120, notifyAfter:110, onExpire:function() { }, }; // The actual plugin constructor function Plugin( element, options ) { this.element = element; this.options = $.extend( {counter:0}, defaults, options) ; this._defaults = defaults; this._name = pluginName; this.init(); } Plugin.prototype.init = function () { this.tick(); }; Plugin.prototype.reset = function () { this.options.counter = 0; }; Plugin.prototype.tick = function () { if (this.options.counter > this.options.countUpTo) { //timer expired this.options.onExpire($(this.element)); } else { if (this.options.counter > this.options.notifyAfter) { $(this.element).find('span').html('<strong style="font-size: 15px; color:#ff0000;">' + this.options.counter+ ' seconds</strong>'); } else { $(this.element).find('span').html('<strong style="font-size: 15px; color:#3366ff">' + this.options.counter + ' seconds</strong>'); } setTimeout(function() { this.options.counter += 1; this.tick(); }, 1000);//calling tick function again } }; $.fn[pluginName] = function ( options ) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin( this, options )); } }); }; }(jQuery, window)); </code></pre> <p>on document ready ::</p> <pre><code>$('#countdown').countup({ onExpire:function() { alert('hi'); }, countSince:new Date(),//count from this countUpTo:30,//seconds from the countSince to expire notifyAfter:20 }) </code></pre> <p>after that i want to call reset() function on $('#countdown'). how to do that? Or is there a better way to write above code? Please give me some help here.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload