www.wysiwygwebbuilder.com

[rz] Simple Meter v1.3

This lightweight extension creates elegant and fully customizable multipurpose meters.
Beautify your surveys, stats and any number you want!

Some features:

- Multidirectional and responsive.
- Colors, font size, style, weight and opacity for the percentage.
- Auto-hides percentage when is not enough place.
- Custom colors, patterns and opacity for both the base and the meter elements.
- Custom range from 0 to n.
- Initial value; or change it later and update the instance with ease.
- Maximum backward, cross-browser and cross-platform compatibility.
- Really lightweight, no dependencies, no jQuery.

...and more!


DEMO


* New in version 1.3

- Optional "live" modes to start over when the instance is within the viewport (similar to [rz] Live Counter).
- Optional border.
- Minor code tweaks.

* New in version 1.2

- Optional transition for a smoother effect while the extension is being updated (some browsers may not support this feature).
- Optional initial delay until the extension is updated for the first time.

* New in version 1.1

- The value can be shown instead of only the percentage.
- Values use the locale formatting automatically.
- Optional prefix and/or suffix for the percentage or the value shown.
- Code moved to an external library.
- Improved preview on workspace.


HTML 4.01 Transitional
W3C compliant


How to use?

1. Drag and drop all the extension instances you need.
2. Open the properties dialog and setup the appearance according to your design scheme.
3. The most important parameter is the maximum value and the current value.
4. Preview or publish.

How to update the value?

1. MyMeter.value = (here the value you want);
2. MyMeter.update();
3. Replace MyMeter by the actual instance name.

Enjoy!

* New in version 1.1

- The value can be shown instead of only the percentage.
- Values use the locale formatting automatically.
- Optional prefix and/or suffix for the percentage or the value shown.
- Code moved to an external library.
- Improved preview on workspace.

* New in version 1.2

- Optional transition for a smoother effect while the extension is being updated (some browsers may not support this feature).
- Optional initial delay until the extension is updated for the first time.

Looks good - but using the DEMO from the first post, the More/Less/Reset buttons are not clickable in Firefox or Safari ??

thank you for your feedback
the buttons are clickable, you should see how the vertical thin meter reacts (just small quantities)

I 'Should have gone to SpecSavers!'

* New in version 1.3

- Optional "live" modes to start over when the instance is within the viewport (similar to [rz] Live Counter).
- Optional border.
- Minor code tweaks.