Code

Discussion on FlipTimer - jQuery Countdown Timer

Discussion on FlipTimer - jQuery Countdown Timer

Cart 297 sales

AthenaStudio supports this item

Supported

This author's response time can be up to 5 business days.

54 comments found.

Hi

I’m sorry if I’ve asked this twice, but the email notification wasn’t checked!

I’m trying to figure out how to let a user choose from a list of countdown lengths:: 3/4/5/10-minutes, and then when they click a button, the countdown timer appears and starts a countdown for the selected length of time?

I’m not amazing with javascript or jquery, and I’m trying to figure out the best way to get the chosen time length passed to the countdown. Is this possible with your script?

Hope you can help…

KR, Jon

You should write your own JS code for it.

Then, call Flip Timer creating script with the new date interval.

How can I run this with visual studio code?

I’ll put this at the top of my site. Please help me.

I need a countdown and responsive part. Please make a training video?

You should include JS & CSS files to your project which is written in the help.

Does the timer have an auto reset (restart) feature?

Same replied message.

No callback function ? Really ?

There are 3 expire types. No external function call as written in description.

You can add it. Too easy.

expireType: “message” //message, hide, redirect, callback expireCallback: null

switch (options.expireType){ }

case "redirect":
    document.location.href = options.redirect;
    break;
case "callback":
    options.expireCallback();
    break;

....

$(”#counter”).flipTimer({ date: date expireType:”callback”, expireCallback: function() { alert(“callback”); } });

Ok. I’ll add it asap.

Wait a second, what is the latest version of this script?

I got version 1.0 and the documentation also references 1.0

Could this be the reason why the onFinish functions aren’t working? Please help as soon as you can.

I removed callback function.

Why? It’s a key feature of this product!

If you read item details, you won’t see callback function.

Hi,

I tried adding a function which should be triggered when the countdown expires, but so far it hasn’t been working. This is a basic example of what I’m doing:

jQuery(document).ready(function() { jQuery(".countdown").flipTimer({ date:"2022/11/12 22:45:00", timeZone:1, dayText:"GIORNI", hourText:"ORE", minuteText:"MINUTI", secondText:"SECONDI", bgColor:"#fff", dividerColor:"#000", digitColor:"#333", textColor:"#fff", onFinish: function () { window.location.href = "https://mydomain.com"; } }); });

As you can see, this very simple function doesn’t work. Please advise, as I have no idea what to do. Also, the docs that came with the plugin seem very outdated. There is no mention whatsoever of this “onFinish”. I found it by browsing some previous comments.

I hope you’ll manage to reply soon because I’m stuck at the moment.

Hi, it’s been over 2 months. Is this feature going to be actually added?

I would appreciate an honest answer.

Thanks

Can you PM me? I’ll send you modified code within 2 days.

Code did not work I need a refund please

Can you write a test url before requesting refund?

Thanks,

I changed it.

One more question.

I want to show just like, D – 1, 2, 3 so.. How can I change the number to “D”? is it possible to change like this? date:”2020/12/20 00:00:00”, to date:”D”

or other suggestion?

Thanks for quick reply!

You should work with source code in order to modify it so. You can copy sources to deploy folder.

Hello,

Thanks for made great timer plugin. Could you help me? I want to make something like this.

D-9 D-8 D-7 D-6 D-5…. not D-09 D-08 D-07 D-06 D-05….

Is it possible??

Thank you

It must work like that in order to change all days. But, you can hide them by adding custom CSS.

For example:

.flip-wrapper.day .flip-0 {
  display:none !important;
}

Or, you can change day text number the timer settings.

$(".countdown").flipTimer({
    dayTextNumber:1,
    ...            
});

If you want to edit source code, you can find it in source/fliptimer/ folder.

Pre Sale question. I would like to display the timer everyday in a certain time period. For example between 6am and 6pm daily. Is it possible to set this timer up like this? I only need the shortcode function not any functionality on a product page. Kind regards

You can add your own PHP or JS codes to show/hide elements in your website

Hi There

I am using your product on an ecommerce server that we whitelabel, so I don’t have the ability to upload a stylesheet or js file.

I tested this using your links on your demo site, and demo information, with the exception of the stylesheet, which I took away the link and just uploaded the styles to the main site. I am not getting the clock to load up.

Are you able to see what’s going on? https://ndcs.ebloxstoreipu.com/

Ok – i updated and hosted it on my side. Now any ideas why it’s not displaying?

You can open Developer Tools of your browser to see errors in your website easily!

Your site gives the following error:

Loading failed for the <script> with source “https://ipromoteuw2.sg-host.com/js/jquery.js”.

Loading failed for the <script> with source “https://ipromoteuw2.sg-host.com/js/jquery.fliptimer.js”.

As I said, you can open Developer Tools to check your site errors!

Hi,

I want to start the countdown timer on 4 minutes for every visitor, and not to count down to a date. I have hidden the days and hours.

How do I set the countdown timer to 4 minutes instead of a date?

What do you mean “it goes on autoreset”? So you can’t make the timer stop on zero and show the expired message? When I set autoreset to false the timer uses the date instead of 4 minutes.

If you select auto reset you can’t stop the timer.

Or, you can set the date as Now+4 min. But, doing it programatically is your business.

Hello, can you help me please figure out how to make the timer fit properly? Please take a look at the link below https://www.arendsvault.com/sli/counter-test/index-count.php Thank you so much,

style.css and base.css

Thank you for checking, I appreciate it. I cannot rename any of the existing files on the client’s end. Can I rename the counter css if you tell me where to find them? Thank you again!

You should copy source/fliptimer folder into deploy/fliptimer and rename all ”.day” and class=”day” with another value.

fliptimer.css and jquery.fliptimer.js.

Hello, on mobile devices when you scroll down or up and the browser url bar auto hides the counter keep on resetting to 00:00:00 can this be fixed?

I checked it again and fixed.

You can download new files or remove following code from source/fliptimer/jquery.fliptimer.js and copy that file to into deploy/fliptimer folder:

$container.hide();

Thank you so much will try the above and get back to you if I have any issues. Great support and product.

Ok. Thanks!

for callback, can this be a redirect to another URL or to a modal window (even better)? Then, after a period of time, that other URL or the original page with modal would have a callback to close / return. So I can schedule by day and time (hour and minute). Hopefully this is clear, thank you :)

But, you can add your own function as callback. So, it’s possible.

Great, thank you!

Hi. 1. I can create a countdown timer badge and apply it to 50 different products, with different dates. (I want to use a simple product, sale price dates) How is it possible to do it?

2. Supports Dokan

You can use it multiple times in your site. You just need add the layer ID.

Hi, the problem with the shifting of the tiles still exists, I can send a picture from the screen where the problem is clearly visible in any browser.

Can we fix this shift?

Thanks

Please, send a demo url!

Hi,

the site is not in production and there is no address, again I pay a picture of the problem

https://webroom.bg/problem_again.jpg

Hi, I see that this script has an update in 2020, but does it work with the latest jquery-3.5.1?

Version 1.12.4 is very old, please fix this problem because the script cannot be used on modern sites.

Regards

Ok. I’ll be so happy if you rate it from Downloads.

Hello

I continue to use your script and I’m happy. However, there is something that I think deserves your attention. Please look at the image from the URL, where I show with arrows the horizontal displacement of the tiles on the counter.

https://webroom.bg/problem.jpg

Can this be fixed because it creates an unpleasant aesthetic experience?

I’m sure you can do that, thank you.

Ok. I’ll check it out. Thanks!

Hello. I am trying to set up a 10 minute countdown timer (it will be on a sales page to create urgency to make a purchase).

However, I cannot figure out what settings to use. The following settings are currently displaying a 27 day countdown timer:

date:"2050/12/25 00:00:00",
timeZone:0,
past:false,
//The number of days to be shown
dayTextNumber:2,
//Show-Hide Day, Hour, Minute, Second
showDay:true,
showHour:true,
showMinute:true,
showSecond:true,
//Texts
dayText:"Days",
hourText:"Hours",
minuteText:"Minutes",
secondText:"Seconds",
//Flip style
bgColor:"#333",
dividerColor:"#000",
digitColor:"#fff",
textColor:"#666",
borderRadius:6,
boxShadow:true,
//Multi color
multiColor:false,
//Auto reset
autoReset:false,
resetInterval:86400, //1 day as seconds
//Timer on finish function
onFinish:function() {}

Please let me know what I need to adjust in those settings in order for each visitor to see a 10 minute countdown timer when they come to the page. Thanks!

You should set today’s date:

$(".countdown").flipTimer({
    date:"2020/07/14 00:00:00",
    autoReset:true,
    resetInterval:600
});

It works properly like that.

https://prnt.sc/thpo2a

Thanks. It works now! One final question… what do I need to do if I want for the timer to disappear (or for it to stay at 00 00) after the timer has ended? Can you please provide the onFinish settings that are needed for this? As of now, it keeps repeating the 10 minute timer on the page over and over again.

You can add an external JS function to work when the time is up.

How can I set a countdown timer which starts when the page is loaded and ends after a fixed time in minutes/hours?

You can use auto reset and reset interval options which are written in help file..

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey