After some specified inactivity time (IDLE Time say for 10 mins) the application should give a pop up box with a timer (should display like 60 59 58 ....1), that box should close within 60 secs with cancel option selected and that browser should close if user doesn't select any option. If the user selects the cancel option within 60 secs also it should be closed.
To show a popup box I am using setTimeout("pop()",600000); but how to include a timer in that at least that box should close within 60 sec if user doesn't select any option. Is there a solution for this?
You may try putting below code in your popup window.
<script>
function mytimer()
{
setTimeout(function closewin(){window.close;}, 600000);
}
</script>
<body onload="mytimer();">
You can use setTimeout() or setInterval() again. In your pop() function, start another function with a timeout of 1 second (1000ms) and on each call decrease a counter and update the label. When the counter reaches 0, check that the box is still on the screen and if so call window.close() (not all browsers will actually respond to a closing attempt though).
Example:
function pop() {
var counter = 60;
var box = document.createElement('div');
var label = document.createElement('span');
label.innerText = counter;
box.appendChild(label);
// Position box and label as you wish.
function tick() {
counter--;
if (counter == 0) {
window.close();
} else {
label.innerText = counter;
setTimeout(tick, 1000);
}
}
setTimeout(tick, 1000);
}
Related
Hi I was wondering if anyone can help me. I am trying to create a simple card game using html css and javascript. It has a 90 second timer which I want to start counting down on the first click of the card.
Any ideas how to do this?
Thank you!!
If you want to run a function after 90 seconds then
element.onclick = function () {
setTimeout(myFunctionAfter90Secs, 90 * 1000);
};
And you would define element to be the element that's clicked on (use a querySelector) and define your myFunctionAfter90Secs
If you want to display a timer then:
Html:
<div id="timer"></div>
<div id="card"></div>
<script>
var timer = document.querySelector("#timer");
var card = document.querySelector("#card");
var initialSeconds = 90;
card.onclick = function () {
var myInterval = setInterval(function() {
if (initialSeconds > -1) {
timer.innerHTML = initialSeconds;
initialSeconds--;
}
else {
clearInterval(myInterval);
}
}, 1 * 1000);
};
</script>
This will make sure your timer updates every second until it hits 0, then the reset should clear your interval but feel free to tweak the code to fix it
<div class="popup_div">Form here</div>
What I am doing is to make this "div" popup when the page loads after 5 seconds, then when the user closes the popup div it will count again to 15 seconds to appear again, then when the user closes it again it will show for another 30 seconds
This is the interval
5 secs (on page load)
15 secs
30 secs (final popup, it won't popup after this)
Here is My fiddle, hope this helps
https://jsfiddle.net/3xk725ts/
Here I wrote a solution using setTimeout instead of setInterval so you don't need to take care about clearing it.
var iteration = 0;
var times = [5000, 15000, 30000]
var showPopUp = function(time) {
setTimeout(function() {
$('#timer').show();
$('#timer').html("<span class='close'>X</span><h3>Count down complete</h3>"); }, time)
}
showPopUp(times[iteration]);
$('body').on('click', '.close', function() {
$('#timer').hide();
iteration +=1;
if (iteration < 3) {
showPopUp(times[iteration])
}
});
I have very little experience in coding in general, however, I still need a timer that comes on a pop-up that goes from 20 or 30 minutes to 0, and it should display the time remaining (like MM:SS). Then, when the timer hits 0, a new pop-up should appear that displays some plain text. Is this even possible?
This could do the work
let time = 5;
let element = document.getElementById('countdown');
function lower() {
if(time >= 0) {
element.innerHTML = time--;
}
else {
console.log('popup')
//open popup here
}
}
setInterval(lower, 1000);
I did not do the time format tho. Only shows in seconds now
If the downvoters could leave a reason. That'd be great.
Lets say I have a value of 10 on my web page, and a button.
Every time a user clicks on this button, I want to have a visual indication of the value decreasing by 1.
When value is 0 (after 10 clicks) it will hide a div, and show another one.
However when clicking the button, not only the counter needs to reduce by 1 but it also needs to open a window. (It's the same window every click)
On every click I'd also like to change style="width:x%"`` with 10-20-30% and so forth. (But with a delay of 5 seconds)
Does anyone have an idea on how to do all of this, without going overboard on the amount of code.
Here the steps:
Click button
Window opens
Counter goes from 10 to 9
After 5 seconds have passed the progress bar's style switches to
width: 10%;
...
Counter reaches 0:
Hide div X (fadeout)
Show div X
source code:
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
//hide div
//show div
}
i.innerHTML = parseInt(i.innerHTML)-1;
window.open("");
//change loader
}
This code is maybe the solution you wanted:
function countdown() {
var i = document.getElementById('counter');
if (parseInt(i.innerHTML)<=0) {
$("#counter").fadeout();
i.innerHTML =10;
i.style.width="100%";
$("#counter").fadein(10);
} else {
i.innerHTML = parseInt(i.innerHTML)-1;
setTimeout(function(){
var i = document.getElementById('counter');
i.style.width="10%";
i.innerHTML="1";
},5000)
}
var msg = window.open("", "Window name", "width=200, height=100");
msg.document.write("Some HTML");
}
You have to add jquery in the html head!
Leave a comment if the code doesn't help.
I have a little problem regarding browser window closing,
Basically, I have a page which I want to close after 15 minutes of inactivity. I alraeady managed to make a timer that will alert the window after inactivity for 10 minutes.
What I need is that on timer finish, a popup/alert with a visible countdown comes up and from here the user can either continue with his session or end it. If the user does not click on continue or ignore the popup for 5 more minutes, both the popup and parent window will close. Else if the user presses continue the popup will close and the main page is refreshed (and thus starting the timer again) Any suggestions? Here is my code:
var idleTime = 0;
var activeTime = 0;
var warningFlag = 0;
var loginTime = new Date();
var logoutTime = loginTime;
setInterval(function checkIdle() {
idleTime += 1;
activeTime += 1;
if(idleTime > 10) {
alert("You've been inactive for 10 \n minutes, are you still there ?\nYou logged in at " + loginTime);
warningFlag=1;
}
if((idleTime > 15) && (warningFlag==1)) {
alert("You've been logged out due to inactivity for 15 \n minutes? \nYou logged out at " + logoutTime);
window.close();
}
window.onload = resetTimer;
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
},1000);
function resetTimer() {
idleTime = 0;
}
Instead of alert window use a div for that visibility hidden/visible is toggled. That div should contain another container, div or span, for displaying the countdown time.
You can use modal windows, they behave like alerts by displaying a div and blacking out the rest of the page.
You can see some good examples here:
http://www.scriptiny.com/2011/03/javascript-modal-windows/
Hope this helps.