Need Help With jQuery Progress Bar

I am a jQuery novice and I am trying to build a dynamic jQuery progress bar. What I need to do is offer a series of checkboxes on a page so that when the visitor checks or unchecks a checkbox it will increase or decrease the value shown on the progress bar. In addition, I need to alert the visitor when they have reached the maximum amount (percentage). Any help would be appreciated.

Here is what I have:

Javascript:

<head>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
       $(document).ready(function() {
           $("#budgetbar").progressbar({ value: 0 });        
          $(".option1").observe('click', progressbar({value: 10});
          $(".option2").observe('click', progressbar({value: 50});          
          $(".option3").observe('click', progressbar({value: 20});
          $(".option4").observe('click', progressbar({value: 50});
          $("#budgetbar").progressBar({ max: 1000, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Budget limit reached!"); } }} );

});
</script>

</head>


HTML:


<body>

<div id="budgetbar"></div>  
<div>    
    <input type="checkbox" class="option1" />Expense 1 - $100,000<br />
    <input type="checkbox" class="option2" />Expense 2 - $500,000<br />
    <input type="checkbox" class="option3" />Expense 3 - $200,000<br />
    <input type="checkbox" class="option4" />Expense 4 - $500,000<br />
    * Max Expenses - $1,000,000
</div>  

</body>
kenjpeteAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
kenjpeteConnect With a Mentor Author Commented:
I have solved this myself, so that others can use the code if needed, here it is:


<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $(function() {

    $("#budgetbar").progressbar({

        value: 0,

        max: 100,

        textFormat: 'fraction'

    });

    $('.option').on('change', function() {

        var total = 0;

        $('.option:checked').each(function() {

            total += parseInt($(this).val());

        });


        if (total == 100) {

            alert("You have closed the budget shortfall!");

        } else if (total > 100) {

            alert("Your last selection has caused you to exceed the necessary $3 million budget shortfall!")

        }

        $("#budgetbar").progressbar("value", total);

    });

});

});

</script>


<body>
  <div id="budgetbar"></div>  
<div>    
    <input type="checkbox" class="option" />Expense 1 - $100,000<br />
    <input type="checkbox" class="option" />Expense 2 - $500,000<br />
    <input type="checkbox" class="option" />Expense 3 - $200,000<br />
    <input type="checkbox" class="option" />Expense 4 - $500,000<br />
    * Max Expenses - $1,000,000
</div>  
</body>
0
 
mcnuteCommented:
According to your values given by the jquery code above, your max value in the progressbar should be 100 and not 1000.
0
 
kenjpeteAuthor Commented:
I changed that value to 100 but the script still isn't working. Any other ideas or thoughts?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
kenjpeteAuthor Commented:
I modified the jquery code to the following and now the progress bar is bound to the click event, but I'm still not sure how to increment the value if multiple boxes are checked or decrease the value when a checkbox is unchecked?

Here is the modified jquery code:


$(document).ready(function() {
           $("#budgetbar").progressbar({ value: 0 });
           $(".option1").click(function () {
                         $("#budgetbar").progressbar({ value: 10 });

           });
           $(".option2").click(function () {
                         $("#budgetbar").progressbar({ value: 50 });

           });
               $(".option3").click(function () {
                         $("#budgetbar").progressbar({ value: 20 });

           });
           $(".option4").click(function () {
                         $("#budgetbar").progressbar({ value: 50 });

           });
       
       //$("#budgetbar").progressBar({ max: 100, textFormat: 'fraction', callback: function(data) { if (data.running_value == data.value) { alert("Budget limit reached!"); } }} );

});
0
 
mcnuteCommented:
Try to check for the :checked selector.

like this:

$('budgetbar').click(function(){
var progBar = '';
$('input:checked').each(function(){
progBar += $(this).val();
});

budgetBar(progBar);
});

function budgetBar(progBar) {

// here update the progressBar and check if the :checked values reached 100 or more >= operator

}

Open in new window


If you could give us a link where to see your code, we can help you even more.
0
 
mcnuteCommented:
Well, it is not all about posting the solution to authors here. As for me, I try to suggest the way to solve a problem but not giving a full solution to people. This helps people for future problems also, and not only solving their problems in a short term perspective. Good luck with your projects.
0
 
kenjpeteAuthor Commented:
I accepted my own solution because none of the expert responses worked.
0
All Courses

From novice to tech pro — start learning today.