I am facing some issue with a jQuery plugin which I have used in my project to show countdown. Locally it is working fine but when I deploy it on Netlify others things works except the countdown. I am giving the code for your better understanding.
(Note: It is a basic index file & I have used the plugin by downloading.)
Index.html
<!-- Countdown attachments-->
<link rel="stylesheet" href="Assets/flipclock.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Assets/flipclock.min.js"></script>
<!-- ------ -->
<div class="clock"></div>
<script>
var clock;
$(document).ready(function () {
// Grab the current date
var currentDate = new Date();
// Set some date in the future. In this case, it's always Jan 1
var futureDate = new Date(currentDate.getFullYear() + 1, 0); /* yyyy,mm,dd formate*/
// Calculate the difference in seconds between the future and current date
var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
// Instantiate a coutdown FlipClock
clock = $('.clock').FlipClock(diff, {
clockFace: 'DailyCounter',
countdown: true
});
});
</script>
It looks like this:
click here
But it should look like this:
click here
Related
I'm working on a website were I'd like to use a countdown to a special event. I've now installed the flipclock.js script and it's up and working. But, it generates incorrect date formats, like attached image:
As you can see, the days, minutes and seconds are working as expected, but the "hour" is showing 93. I've used the following code to implement the flipclock.js:
var date = new Date(2018, 11, 8, 12, 0, 0);
var now = new Date();
var diff = (date.getTime() - now.getTime()) / 1000;
console.log(date);
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(diff);
clock.setCountdown(true);
clock.start();
Does anyone know why it's doing like this? I haven't changed anything in the
Just in case someone is still looking for the solution... Here's the content of the link that NoLifeKing refers to in the comments section.
It looks like this issue occurs if you do the following:
clock = $('.clock').FlipClock({
'autoStart': false,
'clockFace': 'DailyCounter',
'countdown': true,
});
clock.setTime(diff);
clock.start();
as opposed to what is done below:
clock = $('.clock').FlipClock(diff, {
'autoStart': true,
'clockFace': 'DailyCounter',
'countdown': true,
});
I am using the flip clock and I set the countdown which is working but when 'I refresh the page, it starts from initial.
For example, I set 25 days yesterday. If I refresh the browser then it should display 24 today but when I refresh the browser then it again starts from 25.
Would you help me in this?
Jquery plugin link http://flipclockjs.com/
var clock;
$(document).ready(function() {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(2.16e+6);
clock.setCountdown(true);
clock.start();
});
<link href="http://flipclockjs.com/_themes/flipclockjs/css/flipclock.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://flipclockjs.com/_themes/flipclockjs/js/flipclock/flipclock.js"></script>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
I checked on the internet and there was an SO Question answering this. Basically you need to calculate the time difference between the current and future dates and supply it to the function, refer the below code.
Please refer to the link below for the original answer.
SO Answer
var clock;
$(document).ready(function() {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'DailyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
var future = new Date(Date.UTC(2017, 10, 17, 5, 15, 0));
var current = new Date();
var difference = future.getTime() / 1000 - current.getTime() / 1000;
clock.setTime(difference);
clock.setCountdown(true);
clock.start();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div class="clock" style="margin:2em;"></div>
<div class="message"></div>
I am using jQuery Countdown Timer & Digital Clock Plugin to create a countdown timer as follows:
<html>
<head>
<link rel="stylesheet" type="text/css" href="timeTo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
< script src = "jquery.timeTo.js" >
</script>
<script src="jquery.timeTo.min.js"></script>
<script>
var timeval = 60;
var timeval = 60;
$(document).ready(function() {
$('#countdown').timeTo({
seconds: timeval,
displayHours: false
});
});
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>
I need to change the color of the timer to red if the time <5sec mean approaches to zero. In order to notify the user that time is going to end.
Also want to redirect to another page once it reached zero.
Please check the Link for API
Please guide me how can make it?
you can use countdownAlertLimit: 5 for your requirement as follow :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5 });
also note if you want to redirect to another page you can use this line of code :
var timeval = 60;
$('#countdown').timeTo({ seconds: timeval, displayHours: false, countdownAlertLimit: 5,callback:function(){
window.location="your location"
} });
When the timer reach 5 the timer will become red.
hope that will help
Perhaps this is what you are looking for. It's already the way you want it if I understood right!
http://lexxus.github.io/jq-timeTo/
I can't make FlipClock.js work. I want to, for example, make a 10 days countdown.
I made this fiddle but the flipclock doesn't appear - http://jsfiddle.net/9hYef/
Html:
<html>
<head>
<link rel="stylesheet" href="/assets/css/flipclock.css">
</head>
<body>
<div class="your-clock"></div>
<script src="/assets/js/libs/jquery.js"></script>
<script src="/assets/js/flipclock/flipclock.min.js"></script>
</body>
</html>
JavaScript:
var clock = $('.your-clock').FlipClock({
clock.setCountdown(true);
clock.setTime(3600);
clock.setCountdown(true);
});
Try getting the current date and compare with the desired date:
var huh = new Date(Date.UTC(2014, 9, 17, 5, 15, 0));
var duh = new Date();
var wha = huh.getTime()/1000 - duh.getTime()/1000;
var clock = $('.clock').FlipClip(wha, { // <-- DID YOU MEAN FlipClock
clockFace: 'DailyCounter',
countdown: true
});
Flipclock() takes various options, but you'll need to make it a json array
var clock = $('.clock').FlipClock({
countdown: true
});
What they don't mention very well is that the first parameter can be the start offset, like so
var clock = $('.clock').FlipClock(3600*24*10, {
countdown: true
});
You can find more working example of this in the faces section of the docs - http://flipclockjs.com/faces
Here is a working JSFiddle http://jsfiddle.net/bensjones/swjo7wjt
How I made this work is by using the references section (on the left) rather than putting it in the code areas. This will often confuse the issue and, many times, JSFiddle itself.
I wonder if this is possible? For a website concept I want to make something pop out or fade in at a certain hour according to the user's computer time. I have tried looking with no avail because I don't know what kind of function would control when an effect takes place.
Any ideas? Thank you.
If you know at what time to fadeIn (ahem) in, then simply calculate the delta between that time (that's supposedly in the future) and our time. Example:
var dateNow = new Date();
setTimeout(function() {
doFadingInStuff();
}, dateWanted - dateNow);
If you get the current time and calculate the future time that you want the event to happen (thus you have an amount of elapsed time until your event should happen), you can use the setTimeout() function to schedule a function call at a precise time in the future. From that function, you would do your animation.
Check out this fiddle
Your JS
var now = new Date().toString();
$('#fadeMe').html(now).fadeIn(9000)
Assuming you only want something to be visible during a certain hour (ie. fade in when it becomes that hour, fade out when it's no longer that hour), you could do this:
// element is assumed to be a jQuery object
var VISIBLE_HOUR=14; // 2:00 PM
function check() {
var isHour=(new Date()).getUTCHours()==VISIBLE_HOUR;
var isVisible=element.is(":visible");
if(isHour!=isVisible) {
element.fadeToggle(1000);
}
}
// We probably don't want to check very frequently...
// You could make it more advanced by checking
// more frequently closer to the hour in which it would be visible.
setInterval(check, 30000);
var eventHour = 16, // 4:00pm
// get the current time as a Date
now = new Date(),
// turn your event time into a Date
eventDate = new Date(now.getFullYear(),
now.getMonth(),
now.getDate(),
eventHour),
// calculate how many MS until your event
eventTimeMS = eventDate - now;
dayInMS = 86400000,
// your event
myEvent = function() {
alert('The time is now!');
};
// adding 24 hours if already past event time today
eventTimeMS = eventTimeMS < 0 ? eventTimeMS + dayInMS : eventTimeMS;
// if currently the right hour, just invoke event
if (eventHour == now.getHours()) {
myEvent();
// otherwise start a timer to invoke your event at the appropriate time
} else {
setTimeout(myEvent, eventTimeMS);
}
I think you want to check the time of day for the client, then fade in or out. This would be done like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var sunriseHour = 1;
var sunsetHour = 19;
function checkForChange() {
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
if (sunPosition != 'up') {
sunPosition = 'up';
$('#theSun').fadeIn('slow');
}
} else {
if (sunPosition != 'down') {
sunPosition = 'down';
$('#theSun').fadeOut('slow');
}
}
}
var nowDate = new Date();
var nowHour = nowDate.getHours();
if ((nowHour >= sunriseHour) && (nowHour < sunsetHour)) {
$('#theSun').show();
sunPosition = 'up';
} else {
$('#theSun').hide();
sunPosition = 'down';
}
setTimeout(checkForChange, 1000);
});
</script>
</head>
<body>
<div id="theSun" style="background: yellow; width: 300px; height: 300px; display: none;">
This box is the sun
</div>
</body>
</html>