Ring UI Web Module

Ring elements for your UI are very popular in modern webdesign. This project serves
as an easy way to add rings to your website UI without any real programming.
Simply add the markup to HTML and call to javaScript to change the fill and inner
content.
To put content/text around or underneath, that is all unrelated, you can treat this as
a div box and just put your additional content around. Line background color,
foreground color and font color can be set. Using ‘transparent’ is perfectly fine as a
value, as per usual in CSS, so making the background line vanish and only having the
active line is easy.
This tool is mainly written in JavaScript which writes HTML using CSS and SVG for
simple integration in websites.
How to Use:
Uses Jquery.

If you create any tag with the class ‘ring_ui’, this code will create a ring element for
you. This means that even this basic line, will yield a ring element:
>
All settings are in fact optional, to make the code more robust and usage more
flexible. Using default values when attributes are omitted.
The following example show you all attributes possible:
>
ring-size: Size in pixels, ring is square.
ring-thickness: The thickness of the line
ring-frontcolor: The color of the line in the foreground, the active percentage line.
ring-backcolor: The color of the background line.
ring-fontsize: Size of the font inside the inner content. In pixels.
ring-fontcolor: Color of the font inside the inner content.
ring-percent: You may set the initial percentage fill here, however this is mostly used
for the dynamic changes.
Colors can be specified in any format that CSS permits.
To change the inner content of the ring, use this call:
ringUI.changeContent(divbox, string of text or html);
You may use any HTML code in the content part. The parameter divbox denotes the
div of the ring_ui class.
Example:
> ringUI.changeContent($('#time-sec-ring'), now.getSeconds());
For changing the fill in percent:
ringUI.changePercent(divbox, integer of percentage);
Example:
> ringUI.changePercent($('#time-sec-ring'), parseInt((now.getSeconds()/60) *
> 100) ); Simply add the markup to HTML and call to javaScript to change the fill and inner
content. To put content/text around or underneath, that is all unrelated, you can treat this as
a div box and just put your additional content around. Line background color,
foreground color and font color can be set. If you create any tag with the class ring_ui , this code will create a ring element for
you.