Forum Discussion
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 ...
Hi Owen, very good idea, I want to replicate it with my projects but I am having the same issue other person had, I do not see the progress bar, I just downloaded your file (both of them) and after publishing I don't see the progress bar, could you help me understand what I am doing wrong? Storyline 360, working on my laptop
This is because my files were created during a time that SL included the jquery library in the published output. Now that it no longer does, you need to reference the jquery library AND allow some moments for it to load before you use any actions to call on it.
Add a "pre-loader slide" on to your course and execute the javaScript below at timeline start to modify the DOM and add the library to the page head. This is similar to the code for adding the bootstrap library.
//Check if jquery has been loaded and if not, load it
if (typeof jQuery == 'undefined') {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.onload = function() {
//jQuery is available now
};
script.id = 'jQuery';
script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
head.appendChild(script);
}
Put a "page loading" message or gif on your slide and let it run for a second then auto advance to the next slide (at timeline end).
Thank you Owen, I will try that.
Hi Owen,
Thank you so much for sharing the updated code for modern player.
Is it possible to insert this progress bar inside SL 360 slide? I tried with the code discussed in this discussion but it is not working for SL360 I guess.
