Custom countdown

Ask for Help
61

that will not affect Glide’s action… it will sync normally

62

Yea but the clock style does not fit my apps style

63

use the digit-style clock

64

I don’t know how to implement this into glide

65

use rich text components, and template columns to substitute variables…
I might update my template when I have time… this will take a few hours

66

How do I implement the HTML code into Glide?

67

rich-text component… but only in Apps… Pages not really

you can try my Code BOOK to see more options… just click my profile

1 Like
68

@ThinhDinh @Darren_Murphy
If you can figure out a solution to my problem with the GitHub code, please reach out to me

69

ok… I nailed the CSS countdown LOL…

now the tricky part is to make it variable… no problem with the count up :wink:
but… if the time is fixed… CSS is ready

countdown
countdown838×678 38.3 KB

1 Like
70

Where can I see the code for this?

71

new version… full CSS:

1 Like
72

How can I see the CSS?

73

I’m sorry @ThinhDinh but this doesn’t work. I have been toying around with it for a couple of hours, and it doesn’t work. Your code (without any changes) only works when a custom date is entered, but if you reference a date/time column it breaks, the timer says something like “NaND NaNH NaNm NaNs”.
NaN stands for not a number, I have tried to find a solution for this, but I can’t seem to find one.
I would really like some help because the code does not work currently.

74

it would be best if you had a CSS countdown… :wink: , and CSS animated control over Glide elements… I did a sample… is working well… now I need to stabilize it, in case someone clicks some other tab and returns… a lot of work LOL, I did not expect that.

75

Can you be a bit more specific on how to implement HTML and CSS to glide? I know how to do it with CSS, but with HTML you have to add ( & ). And right now it is not working.

76

i posted the code above… all you have to do is to copy and paste… then modify to your needs.

77

here… i combined HTML and CSS for you from that post… just add rich text component and paste it there…

<div class="clock">
  <ol class="first">
    <li>00:</li>
    <li>01:</li>
  </ol>
  <ol class="tens">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
 </ol>
</div>

<pre><span><style>

ol.tens, .digits, .first {
  list-style-type: none;
  margin:0;
  padding:3px;
  position: relative;
  display: inline-block;
}
ol.first {
  margin-right: 12px;
}
.tens li, .digits li, .first li {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.first li:nth-of-type(2) {
  animation: minutecount 60s ease-in-out 0s 1;
}

.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 51s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 41s 1;
}
.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 31s 1;
}

.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 21s 1;
}

.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(7) {
  animation: tenscount 60s ease-in-out 1s 1;
}


.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 10s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 9s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 8s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 7s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 6s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 5s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 4s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 3s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 0.7s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes minutecount {
  0% { opacity: 1; }
  2.8% { opacity: 1; }
  2.9% { opacity: 0; }
  100% { opacity: 0; }
}
1 Like