Craig Richards Design

Percenticon - Compact icons to indicate percentage of completion

views:

79,007

try a different background color


silver	gray

green	blue

violet	red

orange	brown

black	white

rose	lightblue

lightgreen	buff

Percenticon (percent + icon)
Craig Richards' handy Percenticon, the configurable percentage indicator graphic, is a great visual cue for online presentations, polls, surveys, questionnaires and slideshows, etc.!

Now just one simple step!
Fourteen designer colors.
Nothing to download.
No programming.
No unstable Java – works on any platform, operating system and a current browser.
Just copy and paste a line of code.
Small – only 118x42 pixels total.
Use Percenticon for personal or commercial purposes free!

Follow This Simple Step
1. Wherever you'd like to visually illustrate your user's progress, their position in a poll, survey or slideshow, or the status of a project's completion, etc., just insert this code:
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.CraigRichards.com/percenticon.cgi?value=0&align=center&color=silver">
</SCRIPT>

In the sample code above, you may notice three parameters being passed to the Percenticon: value, align and color. The parameter string begins with a question mark and each parameter is separated by an ampersand (&). The sample code above contains the default parameters – meaning that if you simply request the Percenticon with no parameter string, you'll get the same result.
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.CraigRichards.com/percenticon.cgi">
</SCRIPT>

Valid Parameters
?value= 1 &align= 2 &color= 3

1. value parameter – Any digit from 0-100.
No decimals, fractions, negative numbers nor other non-digit characters permitted.

2. align parameter – left center right
Choose left or right alignment then any text after it on your webpage will automatically "wrap" around your Percenticon. To prevent the text from automatically wrapping, add a break tag with the clear attribute per the example to the right:

3. color parameter: silver (default) gray green blue violet red orange brown black white rose lightblue lightgreen buff
Percenticons are designed to look great on virtually any color background from white to black and any color between.

Adding Text Is Easy
Just type this code before you type the Percenticon code:
<SCRIPT LANGUAGE="JavaScript">
var text='this is your text';
</SCRIPT>

There's even a handy way to include text directly under your Percenticon! You may use any alphanumeric characters, punctuation*, HTML tages and hex strings.
*Wherever you want to use the single-quote, apostrophe or foot mark ('), you'll need to escape it by inserting a backslash (\) character just before it or you could substitute the character for its hex string equivalent (').

You may also include HTML tags to change the text color or other attributes of the font in which your text is displayed. However do not type any line returns within any parameter (use the <BR> tag sans line returns). Take a look at the example (right):

Tip: It is very simple to place Percenticon into your CGI scripts for dynamic generation of pages such as polls, surveys or a series of form pages! For a live example, click on the survey link below:

User Survey
Are these tools useful to you? Could they be improved? Are they designed well? Do all the functions, er uh, function? Take a few moments to complete my quick User Survey and let me know how you really feel!

Contact / Support Form
These tools were developed to you help streamline development, programming, site administration and other important tasks, and it is our pleasure to make them available to you. Use the form below to request support for your software, report bugs, submit suggestions, hire us for a custom design and/or programming project or ask general questions.
Privacy: Be assured, your privacy is vitally important and any contact information submitted to Craig Richards Design is used internally for support purposes and is never sold, distributed nor otherwise shared with third parties in any form. –Thank you!

Percenticon License – It's Free!
We encourage your feedback and suggestions; however, Percenticon is available for use as "freeware" (no license fee is collected) so free user support is not available. User agrees to run this application at his/her own risk, assumes all liability, and no warranty as to the suitability or performance of Percenticon for your specific purpose is stated nor implied. If dissatisfied with Percenticon, discontinue its use.

Percenticon Troubleshooting FAQ

Percenticon is designed to be as simple to use as possible. However, some users have encountered difficulties that are often quickly resolved by going through the following items:

Invoking Percenticon results in a JavaScript or JS error popup box.

The code you've written to display text may not contain any "hard" returns.

Wherever you want to use the single-quote, apostrophe or foot mark ('), you'll need to escape it by inserting a backslash (\) character just before it or you could substitute the character for its hex string equivalent (').

If you are viewing a local page containing the Percenticon code and you do not have a live connection to the internet, your Percenticon will fail to load and may result in an error.

The code is on my HTML page but nothing shows.

Internet Explorer, Netscape Navigator and other browsers permit users to "turn off JavaScript." Viewers of your webpage containing the Percenticon must have JavaScript turned on in their browser's options, preferences or settings.