table.documentation { width: 90%; border-collapse: collapse; margin: 24px auto; } table.documentation thead tr { background: #ddd; } table.documentation th { font-size: 12pt; font-weight: normal; padding: 8px; text-align: left; } table.documentation th.option_name { width: 15%; } table.documentation th.option_value { width: 20%; } table.documentation th.option_description { width: 65%; } table.documentation tr { border-width: 1px 0px 1px 0px; border-color: #ddd; border-style: solid; background-color: #eee; } table.documentation td { padding: 8px 8px 16px 8px; vertical-align: top; }

Options

The flapper() function accepts an object containing options with the following values:

Option Value Description
width 6 (default) The width of the display in digits. Flapper will accept any value here, so be careful. If you want to display multiple pieces of information on one line, it's probably better to use multiple flappers.
format null (default) A object with options to send to the numberformatter plugin. This plugin isn't required unless this is set.
align right (default) Flapper will right-align the display, and pad its value with spaces on the left.
left Flapper will left-align the display, and pad its value with spaces on the right.
padding   (default) Flapper uses this value to pad the display. Set this to 0 if you're not using the numberformatter plugin and you want to pad your numbers with zeros.
digits see below A object with options for the digits.

The digits take these options:

Option Value Description
timing 150 (default) Animation duration in milliseconds.
chars_preset num (default) Flapper will display only numerals and common punctuation (spaces, commas, decimal points, colons, negative and dollar signs.)
alpha Flapper will display only spaces and capital letters.
alphanum Flapper will display all num values plus capital letters.
chars null If you'd like your own custom stack of letters and numbers, pass an array of characters here. This value will override the chars_preset value. You can also pass an array of strings, in which case Flapper will display entire words as a single digit.
animation medium (default) Flapper uses a very simple, four-frame animation as each new symbols falls into place. This is probably the best options for most applications. It requires the transform plugin.
slow Flapper uses fully-tweened animations to show the symbols falling into place. This options is best for large displays with only a handful of digits (like the header on this page.) It also looks great with a slower timing value (≥ 200). It requires the transform plugin.
fast Flapper uses a minimal two-frame animation to show each symbol falling into place. Use this if you're using multiple displays on a page and you find that the animations looks jerky. This animation looks best with a fast timing value (≤100). This option doesn't require any plugins.