pbutcher / flipdown Goto Github PK

Any rotor whose value is not 0 flips when FlipDown loads.

Browser implementations of line-height vary subtly. For example, the current values render fine in Chrome, but in Firefox, values are shifted upwards slightly.

Would be nice if this has a small and very small version. As small as the one that can be used in a product promotion list or sale list.

Note: this is the best countdown I've used. Thank you for this.

Hi,

I am trying to integrate a flipdown clock on our website. I tried the simple example and the flipdown clock is visible. I do not get any javascript errors. But the clock does not show the numbers, i see only empty "flip cards". see image:

What am i doing wrong?
Niels

Have the following options when the clock hits zero:

• Stay at 00:00:00
• Count up with '+' at the start
• Move on to a new timestamp from a list

I already installed the library using npm, but I can't access the FlipDown component.
I don't want to change the source code, but at the same time, I don't have much experience incorporating JS libraries in React code.

I tried the code below but doesn't work.

import FlipDown from 'flipdown';
import { FlipDown } from 'flipdown';

Is it possible to import and use the methods to start the counter?

While it maybe good to have a translation, see #13
I do not think that it wil be a good idea to translate the strings via css.
Same goes to the English strings inside the css.

Why?

For example (currently via CSS):

English:
1 Days 1 Hours 1 Minutes 59 Seconds
German:
1 Tage 1 Stunden 1 Minuten 59 Sekunden

Reads very unprofessional!

I think (as it is at many much bigger scripts) that it will be better, to have the few language strings as external javascript and initialize the main script with English strings.
If an option is set, for example
{ lang: 'de' }

the translation is loaded (if not exist, the default EN vars are used).
This way everybody can translate in every language he wants, and you have no additonal work - but could provide a professional plugin.

And doing it this way, singular and plural language strings can be assigned and used very easily.

I would need a counter which counts since when I'm sober so that it counts from a certain date up and not down.
Is that something what we could possible integrate into this library it would make it even more attractive.

I'm not that good with js but maybe I should have a look at it? But would rather let someone professional try to implement this feature. This would be for my personal website/blog handy.

If you got any questions just hit me up.

Kind regards,
Daniel Oberlechner

Hi, I want to use flipdown on Vue.js.
But I still don't know how to set up on my project.
The error message is "FlipDown is not defined", I think it's actually flipdown doesn't export module...
How should I do?
Please help me! :)

Hi, what's the best way to tear down a flipdown instance? I don't see a function that does so.

if this doesn't exist

<div id="flipdown" class="flipdown"></div>

there's an error

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'classList')
    at FlipDown._setOptions 

Please do a check and return cleanly (stop) if no container node.

Hello, i was using Flipdown on a nuxt 2 project, where everything was working correctly, when migrated to nuxt 3 Flipdown is no longer working.
now i'm getting this error .

This is how i'm using it

Maybe you can add an option "debug=false/true" to disable console logs like "FlipDown 0.3.2 (Theme: dark)"

Recently i tried to display my site in IE and I noticed that flipdown did not work, please update the code so we can use it on this browser. Thanks

note: It seems there is a problem when loading ES format.

Hello,

I'd like to know if there is any way that this code work with angular 10.
Did you have any idea on how I should implement it please ?

I have try to viewChild and assign Flipdown to it

@ViewChild('flipdown') flipdown: ElementRef;

And also _createClass from Flipdown.

I haven't tested it but it probably doesn't work on lower versions as well. This is because IE doesn't support Array.from. I was able to make it work using this quick workaround I found on SO: https://stackoverflow.com/questions/36810940/array-from-on-the-internet-explorer.

Give the option to use Sass instead while keeping a vanilla CSS option.

I have need for setting the flipdown date to a date within the next year more than 99 days in the future, but doing so causes the seconds to display on new row. Changes to flipdown.css to fix it:
.flipdown
width: 565px;
(was originally 510px;)
and
@media (max-width: 630px) {
width: 350px;
(was originally max-width: 550px with width 312px;)
see updated attached file that I believe fixes it.

flipdown css.txt

Re-factor css to resize counter,
and provide for exmaple 3 options:
Large, normal, small

if day change to 100, the count down show not correct values

var twoDaysFromNow = (new Date().getTime() / 1000) + (86400 * 100) + 1

Hello and thank you for your plugin it works really well!

Is there a way to have .rotor-group-heading at the end (bottom) instead of first (on top)? If I need to modify the JS please tell me what line and I'll do it on my end.

Thank you so much!

For example I just need minutes and seconds. What's the best approach to hide the unneeded rotors?

When there are more than 100 days in the counter the flipdown automatically line-breaks to make it's width 510px as set in css file.

More than 100 days until something happens is not uncommon and it would be nice if the default css supported it.

Hi,
I have created many timer using loop but I don't know how to config ifEnded in this case.

The numbers change before the flip animation completes.

You must add -webkit-backface-visibility: hidden; to your css for front and rear rotor leaves, because backface-visibility alone is not supported by ios/Safari.

How can i force a line break after the day-counter?

Just having a look at your code, and seems I'm unable to do this(?)

class FlipDown {
  constructor(uts, el = "flipdown", opt = {}) {
    ...
    // If opt is specified, but not el
    if (typeof el === "object") {
      opt = el;
      el = "flipdown";
    }
    ...

However, I suppose I could do the following:

var flipdown = new FlipDown(timestamp, {
  theme: "orange"
});

flipdown.element = document.getElementById("flipdown")

// Start the countdown
flipdown.start()

Seems like opts could do with an el property? Or document the above? Perhaps this is a feature request, I dunno. Anyway, just wanted to raise it as I'm having to work out how to do this.

Great timer btw, getting me lots of brownie points ;)

Add support for FlipDown as an ES module with Webpack or Rollup as suggested in #11.

Accommodate different screen sizes. Allow for specifying sizes.

Hello Sir,

Thank you for your awesome work which makes my life easier. However, I have a proposal to make it even more awesome. I suggest to add an option for choosing an upper-limit count down unit. What I mean is, like right now, the upper limit unit is days. What if I want a count-down based on month. Or just based on hours, minutes and seconds. Such as the image below:

Again, thanks for your hard work

How can I have two counters on the same page?

Awesome work here. This is the best looking and most performant JS Flip-style clock I've found. I'm integrating it into a site and I found that to handle small mobile devices I would need a custom @media breakpoint with a bunch of custom CSS to scale things down.

It'd be a great feature to have a way to scale it dynamically using maybe a percentage value as an option passed into the constructor: new FlipDown()

Here's what I ended up doing:

@media (max-width: 576px) {
  .flipdown .rotor {
    font-size: 2.5rem;
  }

  .flipdown .rotor,
  .flipdown .rotor-leaf,
  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear,
  .flipdown .rotor-top,
  .flipdown .rotor-bottom,
  .flipdown .rotor:after {
    width: 30px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    left: 76px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
    bottom: 19px;
    height: 8px;
    width: 8px;
  }

  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    bottom: 35px;
    height: 8px;
    width: 8px;
  }

  .flipdown .rotor-leaf-front,
  .flipdown .rotor-top {
    line-height: 60px;
  }

  .flipdown .rotor-leaf,
  .flipdown .rotor {
    height: 60px;
  }

  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear,
  .flipdown .rotor-top,
  .flipdown .rotor-bottom,
  .flipdown .rotor:after {
    height: 30px;
  }
}

To

this.element = document.getElementById(el);
this.initialised = this.element.hasChildNodes(); 

Hello! Thank you for a great project! I want to change it a little, make the numbers transparent so that the background can be seen through them. I did it, but now the animation is not working correctly. Could you help me with this? How do I make everything look beautiful and make the animation work correctly? Thanks
https://codepen.io/algorush/pen/LYyqOQz

By the way, I made the numbers transparent by adding this line for the classes:

/* Rotor tops */
.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-top,
.flipdown.flipdown__theme-dark .rotor-leaf-front {
  color: #FFFFFF;
  background-color: #151515;
  mix-blend-mode: multiply; /* -------------added this for transparent numbers-------------*/

It's a very good project, I found it much easier in use then FlipClock.js which I used before (and it also requires jQuery).
But I was surprised when I did not see any sign of a stop() method which would be useful in a big complex projects when you need to stop the counter earlier then the deadline occurs according to some app logic.

Hi,
What you have done so good.
But it will be good to have a counter also, which increase or decrease to updated value not instantly but it should show some flip anmation before updating the value and stops at updated value.
Ex: var counter = new Counter(some initial value);

counter.IncrementTo(updated value, transistionTime);

suppose my current value is 3 and called incrementTo function with value of 10 and transition time of 3sec, It should show animation like changing from 3,4,5,6...and it should stop at 10.

I know it is a lot of work, But it will be a very good enhancement for your pliugin.

Regards,
Vijay

Add some CSS themes.

I'm using Google Chrome, and imported the JS code from the example folder.

I've used your fantastic lib in multiple projects now, and I came across some responsive issues.

Beyond some Ideas to improve this, probably in a new Major release (I think this will need markup changes, so it would destroy existing countdowns with custom style) :

1. Switch from Text-Numbers to SVG-Numbers: I think this is the most important point here, if multiple countdowns are used inside columns, the layout of the countdown will fail. If we have the numbers as Inline-SVG Codeblocks instead we have text who sizes with the container width. Examples: https://codepen.io/pcorey/pen/wdGcq or https://codepen.io/chriscoyier/pen/DKcad
2. Improve the countdown layout with Flexbox: This is a perfect case to use Flexbox - I can't imagine a case where anyone wants the countdown to break apart, so it's always in one row: Days | Hours | Minutes | Seconds. To do so, we should change the Markup:

• .rotor-group-heading => This needs to be moved to a new outer wrapper (.flipdown__group.flipdown__group--seconds or something), so the .rotors are alone in this wrapper. Furthermore this labels should be truncated (white-space:nowrap; text-overflow:ellipsis; ...) by default i think.
• The time devider dots should be inline SVGs so they scale down with the SVG Text, so they also need a seperate wrapper
• (Add SCSS files or use CSS variables, so themers can change colors, font-family, etc. more easy)
• (Consider switching to BEM naming - but that's just my personal preference. I would also like to have modifier classes like bla-group--seconds ..bla-group--hours to prevent the nth-child stuff, which just make the CSS more complicated to understand)

I will hopefully find some time next month to try this out in a fork!