
Copy link to clipboard
Copied
Hello~
I have am using a JavaScript timer on a .cfm page. So far everything is working, but what I want to happen is, when the time reaches zero, a button appears on the page. Right now, the timer works, but when it gets to zero, nothing happens at that point. This entire .cfm page is being used as an include on another .cfm page. I am not very familiar with Javascript, so I would appreciate any suggestions. Thanks!
<cfoutput>
<cfset totalSeconds = #currentTopicTime#>
<cfset totalMinutes = Int(#totalSeconds#/60)>
<cfset remainingSeconds = #totalSeconds# MOD 60>
<script type="text/javascript">
var minutes = #totalMinutes#;
var seconds = #remainingSeconds#;
function countDown() {
// decrease
seconds--;
if (seconds == -01) {
seconds = 59;
minutes = minutes - 1;
} else {
minutes = minutes;
}
if (seconds<=9) { seconds = "0" + seconds; }
time = "You are required to view this page for #totalMinutes# minutes<cfif remainingSeconds NEQ 0> and <cfif remainingSeconds LTE 9>0</cfif>#remainingSeconds# seconds</cfif>.<br />You have " + (minutes<=9 ? "0" + minutes : minutes) + " minutes and " + seconds + " seconds remaining.<br />Please review this page until the timer has reached 0.<br />Please DO NOT refresh this page—this will restart the timer!";
if (document.getElementById) { document.getElementById('theTime').innerHTML = time; }
SD=window.setTimeout("countDown();", 1000);
if (minutes == '00' && seconds == '00') { seconds = "00"; window.clearTimeout(SD);}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
countDown();
});
</script>
<hr style="margin-bottom:3px; margin-top:3px; width:90%;" />
<p id="theTime" class="timeClass"></p>
</cfoutput>
1 Correct answer
When the timeout is reached the code does nothing special. You need to
display the button at that point (my example assumes the visibility of
the button is set to hidden, adapt for your own situation):
if (minutes == '00' && seconds == '00') { window.clearTimeout(SD); document.getElementById("id_of_your_button").style.visibility = ''; }
Mack
Copy link to clipboard
Copied
When the timeout is reached the code does nothing special. You need to
display the button at that point (my example assumes the visibility of
the button is set to hidden, adapt for your own situation):
if (minutes == '00' && seconds == '00') { window.clearTimeout(SD); document.getElementById("id_of_your_button").style.visibility = ''; }
Mack

Copy link to clipboard
Copied
Yes, I ended up doing something very much like this. Thanks!
Copy link to clipboard
Copied
Does it have to be that complicated? For a start, I wouldn't mix server(CFML) code with client(Javascript) code.
Something like this is sufficient to conjure up a button.
page1.cfm
=========
<html>
<head>
<script type="text/javascript">
var t;
function timeDisplayButton(secs)
{
document.getElementById("btn").style.visibility = 'hidden';
t=setTimeout("displayButton()",1000*secs);
}
function displayButton()
{
clearTimeout(t);
document.getElementById("btn").style.visibility = 'visible';
}
</script>
</head>
<!--- here, delay = 15 seconds --->
<body onload="timeDisplayButton(15)">
<!--- page that includes --->
<h3>Top page</h3>
<cfinclude template="page2.cfm">
</body>
</html>
page2.cfm
=========
<h3>Included page</h3>
<div>
<p>
<strong>contents of included page: </strong><br>
Bla bla bla and waiting for button to appear next ...<br>
<p>
<button class="btn" id="btn" name="myButton">press me!</button>
</div>

