No problem.
Let us know if you need more help.
One thing to note about timeouts is when the page is out of view ( hidden, tab change etc ) the browser will pause/throttle the running of the timeout
When you come back to the page the timeout will resume where it left off timing wise. Meaning out of sync timing by up to a couple of mins.
Also calling the function multiple times may result in more than one timeout.
There are ways to stop a timeout and start a new one and to try counter the pausing.
But it can get complex.
Dont know enough about your workflow to say if above would be an issue for you.
So thinking about it the simplest thing would be to get rid of the timeout
var date_ = new Date();
var dg_val = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty', 'twentyone', 'twentytwo', 'twentythree'];
var vivo_ = document.querySelector('.vivo')
var envivo_ = document.querySelector('.envivo')
var hour = dg_val[date_.getHours()]
var currentHour = document.querySelector("[data-timeword=\"" + hour + "\"]")
var currentHourTop = hypeDocument.getElementProperty(currentHour, 'top')
hypeDocument.setElementProperty(vivo_, 'top', currentHourTop - 10, 1.0, 'easeinout')
hypeDocument.setElementProperty(envivo_, 'top', currentHourTop - 15, 1.0, 'easeinout')
and use a timeline to call the function every 30s or 1 min depending on your needs.
With this code we just have a repeating timeline ( not the main timeline ) call the function.This pretty much gives you a max known delay.
And you can even use the code for countering tab changes from the page to another and back to run the code when the page becomes visible again.
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
// if the page is shown, run the the vivo function again to counter browser throttling of settimersouts
function handleVisibilityChange() {
///console.log(document[hidden])
if (!document[hidden]) {
hypeDocument.functions().vivo(hypeDocument, element, event)
}
}
One last thing.
I changed the use of class names to use the HTML additional attributes.
I find this is cleaner and easier to manage.
cuadrocadahora_mhv12_notimeout.hype.zip (58.2 KB)