CSS for Responsive Header

You’re welcome.

1 Like

With your previous logic @Jeff_Hager, I made Query 2 which was based on Index 1, successfully returning counting faster on Index 2.
Maybe this is still useful if you want to develop it for countdown. Meanwhile, for slideshow purposes, the first index is sufficient, because the image loading problem cannot keep up with the speed.

3 Likes

Successfully created a time per second simulation with 10 columns and countdown @Jeff_Hager. The only weakness lies in the delay time at the start. The user needs to wait for it to appear, maybe 10 seconds.

ScreenRecording2024-05-25at10.54.01-ezgif.com-video-to-webp-converter

8 Likes

nice!

1 Like

That’s awesome! I haven’t sat down and tried it myself yet, but I’m guessing I would have done it the same way you did. I haven’t been able to think of a way to get around that initial 10 second delay though.

2 Likes

We would love to have that countdown as a native Glide component! :grinning:

2 Likes

Waiting if you still have other ideas. My temporary idea is to camouflage it with some kind of splash.
Another thing I found was the laziness factor. If the application is left for too long, then some of the stages in the back column will appear empty, the time will jump every 3 seconds.

1 Like

I could knock it out pretty easily using a web embed component, but the problem is that it’s sandboxed, so you lose the ability to have the web view interact with the data in the table. I’ll keep thinking.

2 Likes

yeh, maybe something like “Preparing Timer” or “Initializing…”

1 Like

Ya…the 10-second delay is the same one that exists in the data editor (as the data refreshes). It will happen on both ends of the timer (start and stop). Let’s say you want a message to appear when a 60-second timer = 0 seconds. With the 10-sec delay, it’s likely that the message won’t appear for an additional ten seconds after the time reaches zero meaning your 60-second timer will appear to be 70-seconds.

It all comes down to how Glide refreshes the data.

1 Like

Yes, the 10-second delay is due to the desire to simulate the passage of time per second. I am considering whether it is possible to deconstruct this delay method into an alternating pattern: delay-reset repeatedly.
Since this is not my area of expertise (creative), it becomes challenging to think straight. @Jeff_Hager @Robert_Petitto

What you could do is a little bit of smoke and mirrors with 2 rich text components.

The first rich text is a countdown timer without the seconds. Use traditional glide methods. No tricks.

The 2nd rich text would lay right on top of the first and has the full count down timer.

You still wont see the seconds counting down in the beginning but you would see everything else.

I’m eagerly watching this thread :wink:

2 Likes

Nice input for the transition Eric. :+1:
I enjoy tinkering with problems. I believe there is a possibility of having an original solution for this display delay, rather than hoping for the unlikely chance that Glide will improve its update time.

1 Like

Have you used this method, or is it just an illustration?

I implemented and it works. I also have another trick thanks to you! Here I conditionally add a background to the custom collection based on a button label… I hid the button by moving it off the screen with css

.imgcc section > div > div > div:has(button[aria-label="PREMIUM"]) {
    background-image: url(“YOUR IMAGE URL”);
}

3 Likes

Be careful with the use of aria-label. It will not be effective when users use a translator. :wink:

2 Likes

Is there something better we could use instead of aria-label for this type of conditional css workaround?

Provide a complete address, for example: > button:nth-child(2), or add a class to your button if possible or you write it in various languages ​​used by users.

1 Like

I settled on using the universal language and check if Aria-label = 1 :wink:

For my case I am hiding the button anyways

Thanks for the tip. I’m happy to avoid bumping my head

.imgcc section > div > div > div:has(button[aria-label="1"]) {
    background-image: url(“YOUR IMAGE URL”);
}
1 Like