objectivehtml / FlipClock

http://flipclockjs.com/
MIT License
2.74k stars 952 forks source link

Flipping both numbers on clock at all times ... Looking for advice. #395

Closed alevalenti44 closed 5 years ago

alevalenti44 commented 5 years ago

Hey all!

I'm looking to create a flipclock where both numbers flip on interval instead of just one flipping until the other number needs to change.

I had a few ideas on how to do this, assuming that the CSS selector for the number that doesn't need to flip is different from the number that needs to flip, however, I find myself quite lost,

I do understand that this is not how a flipclock works, but I have a client who seems to prefer aesthetics over how a flipclock works.

Any help is appreciated over guiding me down the right path of how which number has to flip is calculated and how I can override it to flip all the numbers in a counter.

Thank you for your help.

alevalenti44 commented 5 years ago

I found a solution for anyone that might also be struggling with this (and is using an individual counter as I don't know if this will cause problems on a dailyCounter or another constructor),

On the digitize constructor method in flipclock.js, remove the for loop that pushes an individual character into the data array and instead push the whole value in the data array.

Screenshot 2019-12-28 at 12 05 56 am

Important to note, however, that this will append both numbers on one flipclock space making them look all smushed together and unpleasant, I was able to fix this by adding width on the .flip-clock-wrapper ul on flipclock.css

Of course, any advice regarding this method is welcome! :)