so I am using this pretty easy to use javascript countdown plugin called
It provides me a method that allows me to set a countdown for a certain time like so:
$('#countdown').countdown('2015/12/25', function(event) {
$(this).html(event.strftime('<div class="days">%D</div> <div class="hours">%H</div> <div class="mins">%M</div> <div class="secs">%S</div>'));
});
THE GOAL:
I have this countdown working just fine, now I want to show a certain picture in a specific date. (for the sake of this question I will not show any image just a simple alert box)
So I did something like this:
$('#countdown').countdown('2015/10/13', function(event) {
$(this).html(event.strftime('<div class="days">%D</div> <div class="hours">%H</div> <div class="mins">%M</div> <div class="secs">%S</div>'));
if( $(".secs").html() == 35 ){
alert("The Second is 35!");
}
});
That works when I want to detect a certain time just fine. But if I try to use that conditional OUTSIDE of that function it will not work of course.
So my thought was "Ok so I need to check a certain time and that can only be done in that function and I have to change content outside of that function how will I do this?" And I figured a Boolean is perfect for this. So then I tried:
var timeCheck;
$('#countdown').countdown('2015/10/13', function(event) {
$(this).html(event.strftime('<div class="days">%D</div> <div class="hours">%H</div> <div class="mins">%M</div> <div class="secs">%S</div>'));
if( $(".secs").html() == 35 ){
timeCheck = true;
}
});
//outside of the function
if(timeCheck === true){
alert("The Boolean worked!");
}
and sadly that did not work. I cannot figure out the problem here or if this is even the correct approach. I see a possible solution here though.
My final goal was to set 3 conditionals in that function and have it set 3 variables to true when the condition is met then use a conditional outside of that function and see if the variable is true, if it is display the picture.
So really the problem at hand is why is this not changing the value of the variable timeCheck?
Help is greatly appreciated thank you.
( Quick Update ) I left out the little html there is:
<div id="countdown"></div>
This seems more like what you want. Basically, you should issue a function call when your desired conditions are met:
var timeCheck;
$('#countdown').countdown('2015/10/13', function(event) {
$(this).html(event.strftime('<div class="days">%D</div> <div class="hours">%H</div> <div class="mins">%M</div> <div class="secs">%S</div>'));
if( $(".secs").html() == 35 ){
TimePassed();
}
});
function TimePassed(){
alert("I want to do something now!");
}
You could get fancier with events and callbacks, but this setup should work for the immediate purpose.
EDIT: because OP asked, this is an untested approximation of what the event approach would look like:
var timeCheck;
$('#countdown').countdown('2015/10/13', function(event) {
$(this).html(event.strftime('<div class="days">%D</div> <div class="hours">%H</div> <div class="mins">%M</div> <div class="secs">%S</div>'));
if( $(".secs").html() == 35 ){
$(this).trigger("ThirtyFiveSecondsLeft");
}
}).on("ThirtyFiveSecondsLeft", function(evt){ alert("I want to do something now!"); } );