Forum Discussion

OwenHolt's avatar
OwenHolt
Super Hero
7 years ago

Bootstrap Progress Meter

I recently discovered some progress meters on the w3schools.com website and wondered if I could leverage them in a StorLine project. The meters are part of a library of code called Bootstrap. I had ...
General E-Learning
TristanHunt3's avatar
TristanHunt3
Community Member
7 years ago

This is very cool! 

Do you think it would be possible to place underneath the player?

 

  • OwenHolt's avatar
    OwenHolt
    Super Hero
    7 years ago

    Absolutely.
    Replace this: $(".presentation-title").after(progressBar);
    with this: $("div.controls-group").after(progressBar);

    For some unknown reason, this breaks the color change so you also need to change the code on your buttons.
    On BOTH buttons, replace this:
    function toggleColor() {
         $("#my_progress").toggleClass("progress-bar-success");
         $("#my_progress").toggleClass("progress-bar-danger");
    };
    With this:
    function toggleColor() {
         $("div.progress-bar").toggleClass("progress-bar-success");
         $("div.progress-bar").toggleClass("progress-bar-danger");
    };

    See attached SL3 file.

Related Content