![\"javascript_progress_bar_01\"](\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/08\/javascript_progress_bar_01.jpg\" "\\"javascript_progress_bar_01\\"")
<\/a>\nFirst you will be at the site to download the software. Click on the link to download the latest version. Save the file to your computer somewhere where you can access it. It will be in ZIP format so you will need to extract the files within it.<\/p>\n You should have a folder that contains these folders and the one file. That html file is the demo that is given with the progress bar. You can delete it or you can keep it for you to look at later if you ever want to go back and look at how it works. We, however, will be making a new file from scratch to call these scripts. Let\u2019s make a new file and call it progress.html. Let\u2019s start coding that file.<\/p>\n This section of code simply starts the HTML file and tells it where to grab the javascript files. Make sure you have the file in these directories on your server or it will not work. If you put all your files in the same folder, just simply remove the js\/prototype and the js\/bramus from the two paths.<\/p>\n Next we have our title and our progress bar. Note the zero percent. This is what value you want the bar to start at. You can change it to any value from 0 to 100 and it will start with that value when the page is opened and\/or refreshed. <\/p>\n These are all of our checkboxes. You\u2019ll notice that every checkbox is calling a function onclick. This is so that we can determine whether or not the click is checking the box or un-checking the box and therefore adding value to the bar or removing value from it. The function we are calling is CheckValues and we are sending the values of progress (form name), box# (checkbox name), and value (amount to add to the progress bar). You can have as many boxes as you want and they can be whatever value you deem necessary. Obviously, they should all add up to 100% when all selected. I have added text to the site to show the user which box adds which amount to the bar. Then we end the form.<\/p>\n This section here is for the author of the tool. It allows them to monitor how many people are using this software (at least those who keep this code in the file). Then we end the body and the html. <\/p>\n The last bit of code is the script to check whether we are checking or un-checking. We initialize the function. Next, we set the checkbox to a variable. Then we check if the box is checked and if it is add the value of the checkbox to the progress bar, and if not we remove the value from the progress bar. Finally we end the script.<\/p>\n Once you put the files in the right places and open the html file in a browser your screen should look like this.<\/p>\n<\/a>\n\r\n<html>\r\n<head>\r\n\t<title>My Percent Bar Tutorial<\/title>\r\n\t<meta http-equiv="content-type" content="text\/html; charset=iso-8859-1" \/>\r\n\t<script type="text\/javascript" src="js\/prototype\/prototype.js"><\/script>\r\n\t<script type="text\/javascript" src="js\/bramus\/jsProgressBarHandler.js"><\/script>\r\n<\/head>\r\n<\/pre>\n
\r\n<body>\r\n\t\t<span style="color:#006600;font-weight:bold;">Percent Completed<\/span> <br\/>\r\n\t\t<span class="progressBar" id="element1">0%<\/span>\r\n\r\n\t\t<form name="progress">\r\n<\/pre>\n
\r\n\t\t<input type="checkbox" name="box1" onclick="CheckValues('progress', 'box1', '7');">\r\n\t\tTask 1 - 7%<br \/>\r\n\t\t<input type="checkbox" name="box2" onclick="CheckValues('progress', 'box2', '8');">\r\n\t\tTask 2 - 8%<br \/>\r\n\t\t<input type="checkbox" name="box3" onclick="CheckValues('progress', 'box3', '4');">\r\n\t\tTask 3 - 4%<br \/>\r\n\t\t<input type="checkbox" name="box4" onclick="CheckValues('progress', 'box4', '18');">\r\n\t\tTask 4 - 18%<br \/>\r\n\t\t<input type="checkbox" name="box5" onclick="CheckValues('progress', 'box5', '9');">\r\n\t\tTask 5 - 9%<br \/>\r\n\t\t<input type="checkbox" name="box6" onclick="CheckValues('progress', 'box6', '6');">\r\n\t\tTask 6 - 6%<br \/>\r\n\t\t<input type="checkbox" name="box7" onclick="CheckValues('progress', 'box7', '8');">\r\n\t\tTask 7 - 8%<br \/>\r\n\t\t<input type="checkbox" name="box8" onclick="CheckValues('progress', 'box8', '11');">\r\n\t\tTask 8 - 11%<br \/>\r\n\t\t<input type="checkbox" name="box9" onclick="CheckValues('progress', 'box9', '16');">\r\n\t\tTask 9 - 16%<br \/>\r\n\t\t<input type="checkbox" name="box10" onclick="CheckValues('progress', 'box10', '13');">\r\n\t\tTask 10 - 13%<br \/>\r\n\t<\/form>\r\n<\/pre>\n\r\n\t<!-- STATS -->\r\n\t<script src="\/mint\/?js" type="text\/javascript"><\/script>\r\n\t<script src="http:\/\/www.google-analytics.com\/urchin.js" type="text\/javascript"><\/script>\r\n\t<script type="text\/javascript">\r\n\t\t\/\/ <![CDATA[\r\n\t\t_uacct = "UA-107008-4";\r\n\t\turchinTracker();\r\n\t\t\/\/ ]]>\r\n\t<\/script>\t\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
\r\n<SCRIPT LANGUAGE="JavaScript">\r\nfunction CheckValues(Form, CheckBox, Value)\r\n{\r\n\tvar objCheckBox = document.forms[Form].elements[CheckBox];\r\n\tif (objCheckBox.checked == true){\r\n\t\tmyJsProgressBarHandler.setPercentage('element1','+'+Value);return true;\r\n\t}else{\t\r\n\t\tmyJsProgressBarHandler.setPercentage('element1','-'+Value);return true;\t\r\n}\r\n}\r\n<\/script>\r\n<\/pre>\n<\/a>\n<\/a>\n