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.
Related
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
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 was "playing" with kripken's box2d when I had a pair of issues. I chose this fork because it seems to be the fastest and the most used.
API defines position on bodyDef but you 'must' give it on body.
Forces, impulses, ... keep attached to the body giving a unexpected constant velocity.
Does anybody get these behaviours before? Does anybody have any hints?
This comes from a complex app but I have simplified for demo:
<html>
<head>
<script src="http://kripken.github.io/box2d.js/box2d.js"></script>
</head>
<body>
<script>
// gravity 0 for top view scene
var world = new Box2D.b2World( new Box2D.b2Vec2(0, 0), true);
var bodyDef = new Box2D.b2BodyDef();
bodyDef.set_type( Box2D.b2_dynamicBody );
bodyDef.set_position(40,40);
var body = world.CreateBody(bodyDef);
// ISSUE 1
// without these two lines real position is 0,0
body.GetPosition().set_x(40);
body.GetPosition().set_y(40);
var dynamicBox = new Box2D.b2PolygonShape();
dynamicBox.SetAsBox(5.0, 5.0);
var fixtureDef = new Box2D.b2FixtureDef();
fixtureDef.set_shape(dynamicBox);
fixtureDef.set_density(1);
fixtureDef.set_friction( 0.8);
fixtureDef.set_restitution( 0.5);
body.CreateFixture(fixtureDef);
//ISSUE 2
// Never ending movements
//body.ApplyLinearImpulse(new Box2D.b2Vec2(5,5),body.GetWorldCenter());
body.ApplyForce(new Box2D.b2Vec2(50,50),body.GetWorldCenter());
function update() {
world.Step(1/30, 10, 10);
world.ClearForces();
console.log(body.GetPosition().get_x()+","+body.GetPosition().get_x());
}
setInterval(update, 1000/60);
</script>
</body>
</html>
For issue 1, set_position should expect a b2Vec2 parameter. Try this:
bodyDef.set_position( new b2Vec2( 40, 40 ) );
I got more issues so finally I switched to box2dweb. Older but more tested and more stable.