ProgressBar Problem

clivegerard

24 Aug 2015, 20:40

I'm trying to include a progress bar in Squiffy using -

<div id="progress-bar">X</div>

I added an extra JavaScript and CSS file to the Squiffy index.html (added lines in <head>)

<script src="progress.js"></script>
<link rel="stylesheet" href="progress.css"/>

progress.css

#progress-bar {
    width: 0;
    background: #f78;
    text-align: center;
    overflow: hidden;
}

progress.js

function progress() {
var progressBar = $('#progress-bar'),
    width = 100;
progressBar.width(width + '%');
var interval = setInterval(function() {
    width -= 10;
    progressBar.css('width', width + '%');
    if (width <= 0) {
        clearInterval(interval);
    }
}, 1000)
}

Here is a preview of how it should work: http://jsfiddle.net/94wKr/

I'm probably forgetting something simple, but any help would be appreciated. Thanks.

Alex

24 Aug 2015, 21:34

Are you actually calling the progress() function anywhere?

It should work if you call it from a section or passage e.g.


[[mysection]]:
    progress()

If not then upload your Squiffy script file so I can reproduce the problem.

clivegerard

24 Aug 2015, 22:34

Thanks for the offer of help.

I've tried calling the function with and without a semi-colon, but no luck yet.

Here is the script file:

@Progress test

This is a test of adding a progress bar.

Try the [[Progress Bar]]

[[Progress Bar]]:
        progress()

Here it is:
<div id="progress-bar">X</div>

It shows the "Here it is:" after clicking on the Progress Bar link, but no animated progress bar.

Progress-Archive.zip

Alex

25 Aug 2015, 12:26

JavaScript runs before the text for the passage/section is displayed. So there won't be a progress-bar div when the script runs.

To fix this, either put the div in the previous passage/section so it's already on-screen, or use setTimeout so the script runs after the text is displayed.

e.g.


[[Progress Bar]]:
    setTimeout(progress, 1000);

<div id="progress-bar">X</div>

clivegerard

25 Aug 2015, 15:47

Thanks so much for figuring this out.

I really like Squiffy and am working through how to implement all the features I need to create my game in it.