Countdown

Documentation updated on December 7th.

Description

The Countdown widget is a member of Controls familiy.

Demo

Code snippet

<form ... >
	<p class="ch-form-row">
		<label for="example">Text:</label>
		<textarea id="example"></textarea>
	</p>
</form>

Instance component

This is the way to create a new Countdown, specifying amount of character to limit the user text input:

var foo = $("#example").countdown(140);

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").countdown({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Countdown API documentation.

Custom text

You can specify your custom text for plural and singular mode, where the variable that represents the number to be replaced should be a hash:

var foo = $("#example").countdown({
	"max": 140,
	"plural": "# characters left.",
	"singular": "# character left."
});

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Countdown API documentation.

Learn more about events on our step-by-step guide.