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.
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.
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-frontcolor='orange' ring-backcolor='#444' ring-fontsize='64'
> ring-fontcolor='orange' ring-percent='33' > inner content
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.
> ringUI.changeContent($('#time-sec-ring'), now.getSeconds());
For changing the fill in percent:
ringUI.changePercent(divbox, integer of percentage);
> ringUI.changePercent($('#time-sec-ring'), parseInt((now.getSeconds()/60) *
> 100) );