Question

Simply – I can’t find an answer to this specific question and my jquery/js experience is still to low to figure it out.

I have this in my code:

$(function() {
    $( "#progressbar" ).progressbar({
        value: 0
    });

    $( "#draggable" ).draggable({
        drag: function() {
            var val = $("#progressbar").progressbar("option", "value");
            $("#progressbar").progressbar("option", "value", val+0.4);

        },
    });
});
</script>

<div id="progressbar"></div>
<br/>
<div id="draggable" class="ui-widget ui-widget-content">
    <p>Drag me arround like a mad man.</p>
</div>

When user drags the element arround, the progress bar gets filled. What I’m looking for is an event, when the progress bar gets filled (the value gets to 100). To be specific, I’d like a paragraph to show beneath the progress bar, but that’s optional.

I was looking for a js if/else statement, but I could not figure out, how to set it as a trigger.

Any help (direct, or as a link to resources) will be nicely viewed.

Answer 1

You can use the complete event of the progressbar API (see the documentation):

$( "#progressbar" ).progressbar({
   complete: function(event, ui) { ... }
});

[EDIT] Your full code would be (with adding a paragraph after the progressbar as you asked):

$(function() {
    $( "#progressbar" ).progressbar({
        value: 0
        complete: function(event, ui) { 
           $('<p>The progressbar is complete</p>').insertAfter('#progressbar'); 
        }
    });

    $( "#draggable" ).draggable({
        drag: function() {
            var val = $("#progressbar").progressbar("option", "value");
            $("#progressbar").progressbar("option", "value", val+0.4);
        },
    });
});
</script>