I was browsing the dynamics forums the other day and saw a post asking about the progress bar in CRM, we created one awhile back; here it is for anyone else that's looking for something similar.
Click here to download a working sample.
What you'll need
• jQuery 1.3.2
• step.gif
• statusbar.gif - You can get this from the /_imgs/ folder in CRM
crmprogressbar.js
function
crmProgressBar(id) {
this
.bar = $(
"#"
+ id);
this
.bar.css({
'height'
:
'23px'
,
'width'
:
'357px'
,
'background'
:
'transparent url(img/statusbar.gif) no-repeat'
});
this
.bar.find(
"div"
).css({
'height'
:
'19px'
,
'width'
:
'1px'
,
'background'
:
'transparent url(img/step.gif) repeat-x'
,
'position'
:
'relative'
,
'top'
:
'2px'
,
'left'
:
'3px'
});
this
.step =
function
(percentage) {
var
width = parseInt((percentage / 100) * 351);
if
(width > 351) { width = 351; }
this
.bar.find(
"div"
).css({
'width'
: width +
'px'
});
}
}
Example
1. Create a new html file
2. Create a new javascript file and copy the above code into it
3. Include a reference to the jQuery javascript library
4. Include a reference to the javascript in your html file
5. Add a "div" tag to the html file and give it an "id"
6. Add another "div" tag inside the "div" you created in step 4. and put a blank space
7. To initialize the progress bar; create a new variable to hold the progress bar, then create a new instance of the progress bar by specifying the "id" of the div you created in step 4.
eg: var progressBar1 = new crmProgressBar("id-of-div");
8. To step/increment the progress bar use the step() instance method
eg: progressBar1.step(10); // will increment to 10%;
<div id="p1">
<div>
</div>
</div>
<script type="text/javascript">
var i = 5;
var cpb = null;
$(document).ready(function() {
cpb = new crmProgressBar("p1");
increment();
});
function increment() {
if (i <= 100) {
i += 5;
cpb.step(i);
setTimeout(increment, 1000);
}
}
</script></FONT< CODE>