When I run the following, I immediately see "Five" in the area I've designated for overlaying text. (I expected to see "One" for a while, then "Two", etc.) What am I missing?
document.addEventListener("DOMContentLoaded", function () {
putHere = document.getElementById("putHere");
pop = Popcorn("#side1"); // Create a popcorn instance
var states = function() {
var rdy = pop.readyState();
if (rdy !== 4) setTimeout(states, 10);
else {
pop.cue( 12, layover("One"));
pop.cue(168, layover("Two"));
pop.cue(336, layover("Three"));
pop.cue(506, layover("Four"));
pop.cue(703, layover("Five"));
}
}
states();
}, false);
Seeking help on IRC, the suggestion to change the pop.cue lines to:
pop.cue( 12, function() {layover("One"); });
pop.cue(168, function() {layover("Two"); });
pop.cue(336, function() {layover("Three"); });
pop.cue(506, function() {layover("Four"); });
pop.cue(703, function() {layover("Five"); });
worked.
(Now to see why they work in Chrome but not Firefox...)