CODEWITHSUNDEEP
javascriptjqueryhtmlcss
IdeoREX
IdeoREX

Reputation: 1485

Set jQuery Function variables from outside function

I'm working with the jQuery ProcessBar [custom label version]. I'm making it so I can check the values inside. I care about the percentage of the bar and the text that is displayed. I can change these values from inside the function. Notice the "progress(15);" and the "progressLabel.text("text");"

I would like to change these from in my body. How can I do this?

I'm also a little confused on the code, because originally this was a complete function. Meaning that they built it to show off. So when you ran the page it automatically went from 0 to 100 percent and complete. My goal is to control it.

$(function() 
{
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );

    progressbar.progressbar(
    {
        value: false,
        change: function() 
        {
            progressLabel.text( progressbar.progressbar( "value" ) );
        },
        complete: function() 
        {
            progressLabel.text( "Complete!" );
        }
    });

    function progress(val) 
    {
        progressbar.progressbar( "value", val );

        if ( val < 99 ) 
        {    
            setTimeout( progress, 100 );
        }
    }

    progress(15);
    progress(20);
    progress(99);
    progressLabel.text("text");
    setTimeout( progress, 3 );
});

Right now I'm trying:

$('#progressbar').progressLabel.text('text');

It's worth mentioning, that I am very new to jQuery.

Upvotes: 0

Views: 108

Answers (1)

Marty Penner
Marty Penner

Reputation: 228

You're pretty close. What you're trying to do, though, is pass an argument to the progress function, but it doesn't use any arguments. Modify the function to look like this:

function progress (newValue) {
    progressbar.progressbar("value", newValue);
}

Then you put in arbitrary values like this:

progress(15);
progress(20);
progress(90);
// Change the label
progressLabel.text("text");
progress(99);
// Progress label will automatically change to "Complete!"
progress(100);

These will run immediately, so you'll need to comment them out line by line and reload the page to see a difference.

I also removed both setTimeout calls, as the first one was used for demo purposes, and yours simply started the demo function.

Upvotes: 1

Related Questions