Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Need Help With jQuery Progress Bar

Posted on 2012-04-05
7
634 Views
Last Modified: 2012-04-16
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>
0
Comment
Question by:kenjpete
  • 4
  • 3
7 Comments
 
LVL 11

Expert Comment

by:mcnute
ID: 37815332
According to your values given by the jquery code above, your max value in the progressbar should be 100 and not 1000.
0
 

Author Comment

by:kenjpete
ID: 37816152
I changed that value to 100 but the script still isn't working. Any other ideas or thoughts?
0
 

Author Comment

by:kenjpete
ID: 37816784
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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 11

Expert Comment

by:mcnute
ID: 37818799
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
 

Accepted Solution

by:
kenjpete earned 0 total points
ID: 37832553
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
 
LVL 11

Expert Comment

by:mcnute
ID: 37832594
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
 

Author Closing Comment

by:kenjpete
ID: 37850294
I accepted my own solution because none of the expert responses worked.
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question