Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

ColdFusion with JavaScript timer

Guest
May 20, 2009 May 20, 2009

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&mdash;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>

2.9K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Enthusiast , May 20, 2009 May 20, 2009

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

Translate
Enthusiast ,
May 20, 2009 May 20, 2009

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 21, 2009 May 21, 2009
LATEST

Yes, I ended up doing something very much like this. Thanks!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2009 May 21, 2009

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>

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources