jQuery counter with modal window - javascript

I'm using jQuery counter with a modal window after some delay in a loop. It is working fine, but the issue that when a page reloads the counter starts correctly from 10 to 0 like 10, 9, 8... 0, which is what I need.
When the page doesn't reload, the modal window loads but the counter starts with 0, 9, 8, 7... 0. I want it to start every time with 10 whenever the modal window loads.
$(window).load(function() {
function function_name() {
setTimeout(function() {
$('#myCounter').modal('show');
var timeleft = 10;
var downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0)
clearInterval(downloadTimer);
}, 1000);
function_name(); // call function
}, 10000);
}
function_name();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="myCounter" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<section id="content" class="middel-align form">
<div class="container">
<div class="col-lg-12 col-sm-12 col-xs-12 text-center">
<h3> The download will begin in <span id="countdowntimer">10 </span> Seconds</h3>
</div>
<div class="col-lg-6 col-lg-offset-3 col-sm-offset-3 col-sm-6 col-xs-12">
<div class="field text-center">
<a id="BtnOne" class="button" type="button" class="close" data-dismiss="modal" aria-label="Close">Continue Browser</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
I hope you guys understand my question.
Thanks in advance.

you should place timeleft--; after . following line
document.getElementById("countdowntimer").textContent = timeleft;
timeleft--;

When you load the page, the span wherein you update the value starts at 10, because you defined it to be so. This only happens once, when the page is loaded.
After that, the start value will be zero (from the last download timer).
To fix this, reset the initial value inside the span to 10, before executing your downloadTimer.
Add the following line (do not remove it from the downloadtimer-function)
document.getElementById("countdowntimer").textContent = timeLeft;
Here
var timeleft = 10;
document.getElementById("countdowntimer").textContent = timeLeft;
var downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0) ...

finally here's your solved code
$(window).on('load',function() {
function function_name() {
setTimeout(function() {
$('#myCounter').modal('show');
var timeleft = 10;
var downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0){
timeleft = 11;
}
}, 1000);
}, 10000);
}
function_name();
});
working fiddle https://jsfiddle.net/DTcHh/95494/

Try this:
var timeleft = 10;
var downloadTimer;
$('#myCounter').on('shown.bs.modal', function () {
document.getElementById("countdowntimer").textContent = timeleft;
$('#myCounter').trigger('focus');
downloadTimer = setInterval(function() {
timeleft--;
document.getElementById("countdowntimer").textContent = timeleft;
if (timeleft <= 0)
clearInterval(downloadTimer);
}, 1000);
}).on('hide.bs.modal', function(){
clearInterval(downloadTimer);
timeleft = 10;
})

Related

Multiply a variable and store that value/output to screen

I have tried a bunch of ways to get this to work. I'm not a coder, and I have a frankensteined abomination of a counter program I put together as a replacement for our expensive counters that kept breaking on us (basically you input a value at the start of the day, and based on that value a calculation is done for the GOAL for the day).
I now want to add a GOAL BY LUNCH field/display that - however simply doing something like
var lunchgoal = goal * 0.69;
And then putting it on the page like I have with the goal field, does not seem to work.
I can either get it to display 0 - which seems like its displaying just the basic 0 value of goal before it is being incremented, or NaN - not a number.
So I thought I need to convert it to a number before multiplying it, but I nothing has worked for me for that. Right now I'm guessing it may be a matter of where they are contained on the page? I find that part of this confusing honestly. Any help is much appreciated, I would have thought this would be fairly simple!
Thank you!
HTML
<html>
<style>
body {background-color: Black;}
p {color: white;}
</style>
<div class="container">
<p> SAMS VALUE: <span id="output"> </span>
</p>
<p style="font-size:110px"> GOAL: <span id="output2"> </span>
</p>
<button style="background-color:white;width:20%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:110px">Actual Count: <span id="clicks">0</span>
</p>
<div class="row">
<div class="col-sm-4"/>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"/>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"/>
</div>
</div>
</div>
</html>
Script
<script type="text/javascript">
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
}
}, SAMSINPUT * 1000);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false,
t;
</script>
You have to do it in loop where goal is changing & you want this to change as well.otherwise it just stays on 0. i shortened the timer for demo purpose
document.addEventListener("keyup", function(event) {
if (event.keyCode === 109) {
event.preventDefault();
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
});
document.addEventListener("keyup", function(event) {
if (event.keyCode === 107) {
event.preventDefault();
document.getElementById("stop").click();
}
});
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
const input = parseInt(prompt("Enter a SAMS number: "));
var SAMSINPUT = input;
// console.log(SAMSINPUT);
document.getElementById('output').innerHTML = SAMSINPUT;
var goal = 0;
var output2 = document.getElementById('output2');
//set interval for GOAL calculation
var samsInterval = setInterval(function doIncrement() {
if (clear == false) {
goal += 1;
output2.innerHTML = goal.toString();
var lunchGoalNumber = goal * 0.69;
var output3 = document.getElementById("output3")
output3.innerHTML = lunchGoalNumber;
}
}, SAMSINPUT * 25);
var timerDiv = document.getElementById('timerValue'),
start = document.getElementById('start'),
stop = document.getElementById('stop'),
reset = document.getElementById('reset'),
clear = false;
<div class="container">
<p> SAMS VALUE: <span id="output"> </span></p>
<p style="font-size:50px"> GOAL: <span id="output2"> </span></p>
<p style="font-size:50px"> Lunch/GOAL: <span id="output3"> </span></p>
<button style="background-color:white;width:35%;height:15%;font-size: 60px" type="button" onClick="onClick()">ACTUAL</button>
<p style="font-size:50px">Actual Count: <span id="clicks">0</span></p>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div id="timeContainer" class="well well-sm">
<time id="timerValue"></time>
</div>
<div id="timerButtons">
<button id="start" class="btn btn-success" disabled="disabled">START</button>
<button id="stop" class="btn btn-danger">STOP</button>
<button id="reset" class="btn btn-default">RESET</button>
</div>
<div class="col-sm-4 col-sm-4 col-md-4"></div>
</div>
</div>
</div>
</body>

how to get different data per minutes

I created some progress bars using boostrap 3 which will show some different results every time the page is refreshed. Here is the HTML for my progress bars:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-5">
<p>Progress bar1</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar2</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
<p>Progress bar3</p>
<div class="progress progress-striped active">
<div class="progress-bar"></div>
</div>
</div>
and this is my JavaScript function
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
var percent = Math.floor((Math.random() * 37) + 60);
$(this).html(percent+"%");
$(this).animate({width: percent+"%"}, 2500);
if (percent<79){
$(this).addClass('progress-bar-danger');
} else if(parseInt(percent)<89){
$(this).addClass('progress-bar-warning');
} else{
$(this).addClass('progress-bar-success');
}
})
});
So, I want to make the generated data appear every 5 or 10 minutes. not every page is refreshed, how can i do that based on my script ? Thank you
Fiddle Link
How about using setInterval? Something like this
$( document ).ready(function() {
$(".progress-bar").each(function (index ) {
setInterval(() => {
var percent = Math.floor((Math.random() * 37) + 60);
$(this).html(percent+"%");
$(this).animate({width: percent+"%"}, 2500);
if (parseInt(percent)<79){
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-danger');
} else if(parseInt(percent)<89){
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-warning');
} else{
$(this).removeClass('progress-bar-danger');
$(this).removeClass('progress-bar-warning');
$(this).removeClass('progress-bar-success');
$(this).addClass('progress-bar-success');
}
}, 300000);
})
});

SetInterval function in javascript is taking longer time to execute

Set Interval function of Javascript is been used for closing the popup after 9 minutes in my react Application. There are 15 popup in my entire application so they are in different components.It works fine on local machine each popup is closed after 9 minute, but it takes 15 minutes on DEV environment
timeOut() {
this.OGintervalId = setInterval(() => {
var totalTime = getStorage("timeout");
var logoutTime = getStorage("expirationConfiguration");
if (totalTime === logoutTime) {
var url = window.location.href.split("/").pop();
if (url === "AppointmentType" || url === "") {
var PopupDisplay = $("#appoitmenttypemodal").css("display");
var restrcitDisplay = $("#restrictAppnt").css("display");
if (PopupDisplay === "block") {
clearInterval(this.OGintervalId);
document.getElementById("closeAppntPopup").click();
} else if (restrcitDisplay === "block") {
clearInterval(this.OGintervalId);
document.getElementById("closeThisPopup").click();
}
}
}
}, 1000);
};
method is called inside the popup code
<div className="modal-dialog">
<div className="modal-content">
{this.timeOut()}
<div className="modal-header">
<button type="button" className="close" id="modalclosenopatientfound" onClick={this.props.enableLocationStep} data-dismiss="modal">×</button>
<h4 className="modal-title" ><Translate>Message</Translate></h4>
</div>
<div className="modal-body">
hey
</div>
<div className="modal-footer">
<button type="button" className="dismissbuttons" data-dismiss="modal">
<Translate>Ok</Translate></button>
<button data-dismiss="modal" id="closeThisPopup" style={{ opacity: 0, width: 0, height: 0 }}></button>
</div>
</div>
</div>
There is a hidden button on popup which gets clicked for closing the popup ie closeThisPopup

Need to find out how to make a button go out

currently, I have a countdown script that counts down to 15.
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button">
<form action="http://website.com">
<input type="submit" style="display: none;" value="Go to website"/>
<script>
var count = 15;
function countDown(){
var timer = document.getElementById("timer");
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
document.getElementById("button");
}
}
countDown();
</script>
It does it's job and counts down to fifteen. What I actually want to happen is that when the 15 seconds is up, it will instead show a button that says "Go to website".
Basically it's like other shortener but it's not.
I don't think document.getElementByID doesnt work. I've been looking for a way to make the button appear but it's not working.
Start with the button hidden, and remove that condition when the timer expires. A common way to do that is to use a "hidden" utility class, as shown below.
Note: Count in this snippet is 3, because I get bored waiting for 15 seconds each iteration. :)
var count = 3;
function countDown(){
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
countDown();
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>
You could use setInterval() function that I think is more natural for the count down process. I reuse most code from #Palpatim answer.
var count = 3;
var myVar = setInterval(function(){ countDown() }, 1000);
function countDown() {
var timer = document.getElementById("timer");
var button;
var skipContainer;
if(count > 0){
count--;
timer.innerHTML = count;
}else{
myStopFunction();
skipContainer = document.getElementById("skip");
button = document.getElementById("button");
skipContainer.classList.add("hidden");
button.classList.remove("hidden");
}
}
function myStopFunction() {
clearInterval(myVar);
}
.hidden {
display: none;
}
<div id="skip" style="margin-top: 4px;">
<p> Please wait for <span id="timer" style="font-weight:bold;">15</span> seconds</p>
</div>
<div id="button" class="hidden">
<form action="http://website.com">
<input type="submit" value="Go to website"/>
</form>
</div>

jQuery: show/hide are instantaneous

I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>

Categories

Resources