I am looking to have a countdown timer (much like the booking agency websites like ticketek use) so the user knows that we will hold a reservation for 10 minutes, and they better hurry up and fill in the form!
I have a gap in my knowledge with how I can incorporate other javascript into an xPage. I would appreciate any assistance.
Essentially my plan is as follows:
Load the page.
Have a countdown timer run from 10:00 to 0:00
At 0:00, go to the new page and lose all data entered
To do this, I referenced the top answer in this stackoverflow post (The simplest possible JavaScript countdown timer?) and am trying to use it in the xPage.
I have incorporated this code into an xPage (see below) as is (so it does not work) hoping it would work, and to then change it to use a computed field control. I have left it as is hoping someone can direct me to where my understanding of this is wrong?
Any pointers as to where I am going wrong, or how best to get a control like this working?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.afterPageLoad>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
var fiveMinutes = 60 * 5,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);}]]></xp:this.script>
</xp:executeScript>
</xp:this.afterPageLoad>
<div>
Please complete in <span id="time">05:00</span>minutes.
</div>
</xp:view>
Put the CSJS code into onClientLoad event. After changing some things it works now:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<xp:eventHandler
event="onClientLoad"
submit="false">
<xp:this.script><![CDATA[
function startTimer(duration, display) {
var timer = duration;
setInterval(function () {
if (--timer <= 0) {
window.location="http://www.google.de";
}
var minutes = parseInt(timer / 60, 10);
var seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.innerHTML = minutes + ":" + seconds;
}, 1000);
}
var fiveMinutes = 60 * 5;
var display = document.getElementById("time");
startTimer(fiveMinutes, display);
]]></xp:this.script>
</xp:eventHandler>
<div>
Please complete in <span id="time">05:00</span> minutes.
</div>
</xp:view>
In case you have to clean up something in your XPage after time is up then create a panel which gets partial refreshed when time is up:
...
if (--timer <= 0) {
XSP.partialRefreshPost("#{id:timeIsUp}", {params: {timeIsUp: "timeIsUp"}});
}
...
<xp:panel id="timeIsUp">
<xp:this.rendered><![CDATA[#{javascript:
if (param.timeIsUp <== null) {
' clean your data
context.redirectToPage('tooLate')
};
true
}]]></xp:this.rendered>
</xp:panel>
Related
Looking for some insight on why my javascript timer doesn't work correctly. Actually it works great except for the fact that it stops with 1 second left and displays an alert. When you hit the ok button it counts down to the final second (0) and displays the alert again. I can't figure out how to stop the alert occuring at 1 second left instead of only at zero seconds...
I altered the code to run at 6 seconds instead of the full ten minutes
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}
<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
This is because the JS is exectuted for the DOM update is shown to the user. This has to do with the JS event loop, and can be circumvented by using setTimeout with a very low timeout, ie 1ms. See the code snippet below for a working example
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
--timer
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (timer === 0) {
setTimeout(function(){
alert('Time has exceeded');
location.href = "http://nova.umuc.edu/~ct388a13/";
}, 1);
}
}, 1000);
}
window.onload = function() {
var tenMinutes = 60 * .1,
display = document.querySelector('#time');
startTimer(tenMinutes, display);
}
<section>
<p id="transactionTimer">Act fast! This transaction must be completed in <span id="time">10:00</span> minutes</p>
</section>
I am building a form that a I need a simple 10 minute javascript countdown timer to display in. I have found and am using the code at the top of the page here: The simplest possible JavaScript countdown timer? .. It does exactly what I need it to, but I need the timer not to reset when it reaches 00:00. I am a novice when it comes to Javascript, so any help would be appreciated.
I looked through the posting on The simplest possible JavaScript countdown timer? .. but was unable to see anyone that specifically talked about stopping the timer from resetting when it ended.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 10,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
The timer works as I need it to, but it resets every time it reaches 0. I just need it to start on page load and stop at 10 minutes. I am just reminding my form users to save their draft every 10 minutes.
Try this:
var myInterval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
clearInterval(myInterval);
}
}, 1000);
Thanks for all the help. I found another piece of code that did the job for me. I'll share below for anyone else to use.
//Countdown Timer
var startTime = 10; //set countdown in Minutes
var doneClass = "done";
var blinkerClass = "blink";
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalLoop = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
for(var i=0;i<display.length;i++){
display[i].textContent = minutes + ":" + seconds;
}
if (--timer < 0) {
for(var i=0;i<display.length;i++){
display[i].classList.add(doneClass);
display[i].classList.add(blinkerClass);
display[i].textContent = "Save Now";
}
clearInterval(intervalLoop);
}
}, 1000);
}
window.onload = function () {
var setMinutes = 60 * startTime,
display = $('#timer');
startTimer(setMinutes, display);
};
//End Countdown timer
Here is the CSS referenced in the code above
.done {color: tomato !important; font-weight: bold;}
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I am trying to make an hta with a countdown timer. I have a timer that works fine in html but when i put the code in to an hta it gives an error. I have also tried running the html version inside of an iframe n an hta. Any help is appreciated.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 60,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
</script>
<body>
<font color="red" size="7">
<big>
<div> <span id="time">60:00</span></div>
</big>
</font>
</body>
<body background="image1.jpg">
You need to add your scripts after your body, not before it. I can't really tell based on the code you have posted, but with the closing </script> tag it seems as though this is what you have done.
You can try changing:
display = document.querySelector('#time');
to
document.getElementById('time');
It would be more vanilla JavaScript... Also change the span to a div with inline-block.
I am just learning html and css, and want to add javascript code that I found on here. This code basicly counts down from specific minute or second.
Here is the code:
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + " minutes " + seconds + " seconds";
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 28.4,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
How could I use this code multiple times? With different time settings. All on same page ofcourse.
I have this code in countdown.js file, and it works great. But If I try to make "countdown2.js" etc, and use that, it wont work. I changed "#time" in code to "time2" etc, and did same in html code.
Sorry for bad explanation. I dont realy know javascript yet, as I havent started learning it quite yet. But I realy need countdown on my site to appear 5 times, each time with different time settings. And I can only display it once.
try this
window.onload = function () {
var timer1 = 60 * 28.4,
display1 = document.querySelector('#time1');
startTimer(timer1, display1);
var timer2 = 60 * 28.5,
display2 = document.querySelector('#time2');
startTimer(timer2, display2);
//... Continues
};
The output will be shown in tags with ids time1 and time2 respectively.
I'm following this example of a PHP session timer using an AJAX call to check the 'time'.
I would like to be able to display some kind of display for the user that is simply a javascript countdown timer such as:
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var length = 60 * 5,
display = document.querySelector('#time');
startTimer(length, display);
};
but with var length equal to the value specified at $_SESSION['timeOut'] = SomeNumber; in the php file.
How can I set these to be exactly in sync and be able to output the countdown to the screen? Or am I able to just utilize the php timing and not necessarily create a js timer?
you can get time of now measured by seconds using php function time() and then save it as time of login in your DB .every time user refresh the page.you must send him $_SESSION['timeOut'] + ($time_of_login) - time() wich returns how much seconds to reach time out
$time_of_login from DB
so php file will look like:
var length = <? echo $_SESSION['timeOut'] + ($time_of_login) - time(); ?>