Has anyone seen the following, I am unable to recreate it on my development machine, but several users have sent the attached photo to show that there is unwanted UI over the top of the designed content.
This is what some users are seeing (Windows Desktops, Chrome and IE)
This is what supposed to see (Fully operational, Mac Desktop and Tablets Safari, Chrome, IOS)
The timer element counts down how long the user stays is required to stay on the scene, it then disappears and the FWD button appears. All timing, buttons, and disappears and reappears work correctly everywhere.
It could be that what ever browser they are using has some sort of plugin or feature that is picking up on the HTML widget. I say this because icon in the unwanted display looks like a print button.
Try and put your inner code into a rect.
Although I do not understand why you are putting this code into innerHTML?
You could simply just use a rect give it the counter id and timer class in the UI and run a hype function on it on scene load
var seconds = 15;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
hypeDocument.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
hypeDocument.getElementById('countdown').innerHTML = "=>";
} else {
seconds--;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
First try to clear the abandon scene/timeline/ mouse/ actions.
If you leave them in they may start clashing when you forget they are there acting in the background.
i.e all the ones calling the Audio.
It does work, it is just your implementation does not work.
You did not exactly follow what I was suggesting. You still put some inner html in the view?.
not going to go back and read the topic. But I doubt it.
The reason, well part of the reason is you have one id name in two elements.
ids for each element have to be unique.
But since you now have two timer elements using the same function and the Enter Viewport action on both of them. You do not even need the id as your will have the element in the hype functions signature args as the element that calls the function.
So you can use that instead.
var seconds = 15;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
element.innerText = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
hypeDocument.startTimelineNamed('Audio', hypeDocument.kDirectionForward)
element.innerText = "=>";
} else {
seconds--;
}
}
var countdownTimer = setInterval(secondPassed, 1000);
The other thing and why I mention above about all the actions calling the Audio timeline.
Even if you only had one action on the scene to start it.
1, why?
2, it may be (will likely be) out of sync with your countdown and fire too soon.
So just start the timeline when the countdown finishes and do so from within the code. ( also shown above)
BUT, its still not working… although now its the 2+ scenes that the JS will not run using the On Enter Viewport => Run CountdownJS