Welcome to the home of Donavon West. An independent consultant and Microsoft MVP. I'll be discussung things that are near and dear to me, including life, love, technology and politics. Are you looking for Donavon Stinson? Or possibly even Donavon Frankenreiter? (man, that dude is everywhere!)

This Blog | Home Server Hacks | LiveGadgets.net | The Swatch | VehiCROSS.net | Explore the Studio Space | Chuck Todd Facts

I was recently asked by a headhunter if I had written any jQuery plugins. I said "No, but I could probably have one written by time we get off of the phone". OK, maybe a little cocky on my part, but not too far off from the truth.

Here is my first jQuery plugin. It is a simple ProgressBar. You could use it for many different applications. One example would be to display to the user the percentage complete he or she was in filling out a survey.

Before I get into the code, let me explain a little bit of what you are seeing to the left. The top jProgressBar uses an image. The next one subtly changed it's bar color from blue to white as the percentage increases. An finally, the sine wave that you see below is made up of 20 jProgressBars oriented vertically and two sine waves that are 90 degrees out of phase.

Using jProgressBar

Using jProgressBar is easy. Simply setup a get a jQuery object then call jProgressBar. In the example below, any HTML elements with a class of percentBar will be turned onto jQuery jProgressBar objects and initialized to a 10 percent full bar.

  1. var bar = $(".percentBar").jProgressBar(10);

Later, if you would like to change the percentage, you can call the method setPercent on any jProgressBar object. For example, the jProgressBar objects created above will now display a 50 percent full bar.

  1. bar.setPercent(50);

You can also pass an optional second argument during the creation of your jProgressBar to specify settings. For example, let's say you wanted your bar to be 125px wide. You could do something like this:

  1. var bar = $(".percentBar").jProgressBar(0, {width:125, height:50});

Settings

Here is a list of all of the jProgressBar settings and their default values:

width width of the jProgressBar (default=100)
height height of the jProgressBar (default=12)
orientation 0=horizontal, 1=vertical (default=0)
border.width width of the border (default=1)

Style

The style of the jProgressBar is controlled through CSS. You can set border, background and bar sub selectors. Here is the CSS that I used on the top jProgressBar in my sample above. The border is set to a solid color of black, the background (the space not occupied by the bar) is set to white and the bar itself is made up of an image.

  1. .jProgressBar_Green .border {
  2. background-color: #000000;
  3. }
  4. .jProgressBar_Green .border .background {
  5. background-color: #ffffff;
  6. }
  7. .jProgressBar_Green .border .background .bar {
  8. background: #6dd436 url(images/jProgressBarBackground.png) right top;
  9. }

Get the code

jProgressBar is being offered on CodePlex. You can get the latest code here.

8 comments:

hong_hai_long said on November 19, 2010 at 3:47 AM ...

I've read some good stuff here. Definitely worth bookmarking for revisiting.
windows 7

 
Andrew Zoldan said on July 19, 2013 at 12:50 PM ...

NIce code. Interesting post. Thanks for sharing.

www.writemypapers.org

 
devil jiang said on April 23, 2014 at 4:26 AM ...

Argentinosaurus is one of the largest hermes outlet dinosaurs ever discovered. You can see what its skeleton looked like at Fernbank Museum of Natural History fendi outlet in Atlanta, Ga. The Argentinosaurus skeleton in the museum's great hall dwarfs everything else in the room. From nose to tail, it's more than 120 http://www.cityofwestwego.com/home.asp feet (36.5 meters) long, and some of its vertebrae are more than 5 feet (1.5 meters) wide. If you walk up the stairs to the second-floor louis vuitton outlet landing to get a better look, the dinosaur's hip will be roughly at eye level.

 
papa young said on March 28, 2015 at 4:11 AM ...

Rain looked cheap, chuckled, then withdrew his hand. Tone cold drizzle, so cheap feel this dialogue seemingly not a ray ban sunglasses sale uk ray ban sunglasses sale online good start. What is inappropriate. cheap want to grab, yet light ray bans sale uk online rain back to the dust. cheap, do ray ban sunglasses sale online you think we two suitable for you. ray ban sunglasses sale online did not you talk ray ban sunglasses sale online to me, you in the end how ah, what do you tell me ah.

 
dongdong said on March 3, 2016 at 10:24 PM ...

kate spade outlet
canada goose jackets
louis vuitton outlet
prada outlet
prada bags
toms outlet
jordan 3 white cenment
converse shoes
michael kors
burberry outlet
ture religion outlet
burberry uk
reebok uk
juicy couture
cartier glasses
omega watches
michael kors handbags
louboutin pas cher
nike roshe runs
ray ban outlet
jordan pas cher
rolex submariner
supra for sale
michael kors outlet
burberry
levis jeans
ghd hair straighteners
ugg boots sale
louis vuitton outlet
michael kors handbags
asics shoes
reebok
converse sale
cheap oakley sunglasses
fitflops outlet
adidas originals
prada
jeremy scott shoes
nike tn
ralph lauren pas cher
20163.4wengdongdong

 
Mohit Dua said on July 16, 2016 at 7:44 AM ...

nice effort for nice post. well done
supersu apk
sd maid pro apk
360 security apk
showbox apk
hungry shark apk mod
es file explorer apk

 
evelyndana09@gmail.com said on August 13, 2017 at 2:02 AM ...

We the company supported in 1977 and started out franchising in view that 1992,
check casher Edison

 
Holly Peppers said on November 18, 2017 at 12:47 AM ...

We honestly want to serve you the simplest matters with 100 percentage satisfactions. It is extraordinarily exhausting to say as soon as exactly must be forced to money your test. Usually it http://www.unitedcheckcashing.com ought to terribly tough to cash if it is now not official hours.check cashing places near me

 

Post a Comment