Bootstrap Progress Meter

Hi All,

Firstly I want to give a massive thank you to Owen for finding this brilliant way to implement a working progress bar into the storyline player.

I've been working on customizing the look and feel of the original example Owen created and have managed to do the following:

1. Remove the need to have a 'Title' in the default storyline player - this can be achieved by replacing "$(".presentation-title").after(progressBar);" with "$(".top-tabs-left").after(progressBar);" - this will move the progress bar down to the 'Menu' bar.

2. With a little bit of help, I've managed to create the bar where any colour can be used rather than relying on the default settings - this will aid people who are trying to get the progress bar to fit into their own colour schemes.  See below:

var progressBar = '<div class="progress" style="height:15px; width:150px; position: absolute; margin: auto; right: 0; left: 0; top: 0px; bottom: 15px"><div class="progress-bar progress-bar-info" id="my_progress" role="progressbar" aria-valuenow="0" aria-valuenow="0" aria-valuemax="100" style="width:0%;margin:0 !important;background-color:#C9D140 !important;"></div></div>';

The bold section tells the css to ignore all previous colours and always use the colour indicated by the hex code.

3. Removing the blank white space around the progress bar.

var progressBar = '<div class="progress" style="height:15px; width:150px; position: absolute; margin: auto; right: 0; left: 0; top: 0px; bottom: 15px"><div class="progress-bar progress-bar-info" id="my_progress" role="progressbar" aria-valuenow="0" aria-valuenow="0" aria-valuemax="100" style="width:0%;margin:0 !important;background-color:#C9D140 !important;"></div></div>'; - 

Again just a simple bit of css that tells the code to ignore the previous information and replace with this.

4. Remove the colour change, this is personal preference I wasn't keen on the bar changing colour - nor was i keen on the bar dropping back down - I thought this might discourage users from clicking back if they thought they were going backwards. Simple change to the trigger - 

Adjust Variable 'Progress' = Assignment - Value = XX - When Timeline Starts - Object - Slide - On Condidtion that 'Progress' < less than XX. - If both XX match this will prevent the progress bar from rolling back.

5. Im currently working on (unsuccessfully) getting text onto the progress bar that is dynamically updated by the myProgress variable. However I've yet to find a solution that will not break the project from working correctly.

If you compare the original code vs mine, you will see I've made other changes such as the height of the bar etc..

If anyone does manage to get the text to dynamically appear on the progress bar please let us know! 

Thanks Guys - Hope this will help someone.