JQuery Progress Bar plugin - 100% width

Question

Again I have a question regarding this plugin: http://t.wits.sg/2008/06/20/jquery-progress-bar-11/

What I want to achieve is to set the progressbar's width to 100% so it is as wide as a container it is in.

What I have done so far, I have changed this line in the plugin:

$bar.css("width",config.width+"px");

To this:

$bar.css("width",config.width+"%");

And then I set width to 100 when I initialize the plugin. That would work, the progress bar is 100% wide, there is just one problem, the image that is supposed to fill the progressbar (progress bar background) stays the same width which is less than the bar width and repeats itself which looks very bad.

I hope that this makes sense to somebody.

If anybody has any exprience with the Progress Bar plugin please help me.

Answer 1

I think this is a style problem, and you probably have repeat-x on the image background style that's why it's repeating, probably you will need to make a larger image or set a different kind of background like just color.

I think your css should look something like this:

bar{
      background-image:url('mybackground.gif');
      background-repeat:repeat-x; //or just background-repeat:repeat
}

so you might need to remove the following line, that will prevent the image to be duplicated accross as your element grows.

background-repeat:repeat-x;

or change it for:

background-repeat:no-repeat;

So if you want to user other than that image it could probably be something like:

 bar{
      background-color:#EEEFFF;
 }

Hope this helps you.