CSS for Responsive Header

yes, twice as fast. Itā€™s superb!
I wonā€™t have to spend time making gifs, lol

1 Like

Javascript will run when the table is initially loaded, but to make the code run again, one of the parameters needs to change. Iā€™m using the current time and the first trigger column as parameters to cause your code to run. Every 10 seconds the time time changes. When the time changes, the code in both columns will run. Whatā€™s different is that the first column will sleep for 5 seconds before returning a value. When that value changes 5 seconds after the time changed, then it will also cause the code in the second column to run. So in the code in the second javascript column will run if either the time changes or the value in the first column changes.

I think this would require at least 10 columns to achieve a timer that updates every second. I have an idea how this would work in my head. Iā€™ll try it out tomorrow and see what I can come up with.

3 Likes

Given your track record in the Glide world and your super comprehensive descriptions, you could compile them into a book. It could be useful for many people and not get lost in this ever-growing thread.

1 Like

so you would need eight more columns to sleep for ā€œ-ā€,1,2,3,4,ā€œ-ā€,6,7,8,9,ā€œ-ā€ seconds respectively and also feed into Himaladinā€™s column? Would it work like that or does the 5 second refresh of the main clock create more limitations?

@Sekayi_Liburd, If this discussion continues later, @nathanaelb will propose another title change. My first suggestion is:
ā€œCSS and javascript ā€¦ā€ :joy:

2 Likes

hahahaha, he will soon come again :joy:

2 Likes

I missed this. Clever.

Whatā€™s this?

thisā€¦ I tried it and it was fun to look at in the table, lol. Reminds me of the whack-a-mole game, except this creates predictable change.

1 Like

I noticed one issue with our current set-up for the slide show. It seems like the very first image takes 5 seconds to load (I think I can guess why)ā€¦ Thatā€™s a lot of ā€œapparentā€ load time from a userā€™s perspective.

Can we set it up so we donā€™t have to wait for the first JavaScript increment to see our first image? I thought of trying an ā€œif Index to show is emptyā€ rule as a temporary patch but havenā€™t tried it yet.

@Himaladin @Jeff_Hager

Yes, thatā€™s another issue. Iā€™ve known about it from the beginning but didnā€™t want to discuss it until the main problem was resolved.
Maybe you can test it by changing: let currentCounter = Math.floor((new Date().getTime() / 5000) % limit) + 0. What happens with the first loading? Or you can place the loading gif in/ouside your first frame.

1 Like

the code didnā€™t work for this purpose since the column takes time to initialize so I inserted an image to hold the spot temporarily.

1 Like

Got it. Another style ---- Carousel with CSS :sweat_smile:

I noticed that. For some reason the second column wonā€™t initialize until the first one returns itā€™s initial value. Not sure why since the value issue used for anything. Iā€™ll think about it.

2 Likes

It means frame 1 will be delayed by 10 seconds + loading time?

I think itā€™s delayed 5 seconds because itā€™s waiting for the first column with the 5 second sleep timer to return itā€™s first value. Once it has a value, then will it always contain some kind of value, so everything is fine after that initial load.

The sandboxed nature of javascript in Glide makes this difficult. Normally it would be very easy to set an initial value, and have code run in a continuous loop with a timer that simply increments a number after so many seconds and have easy access to that number as itā€™s incrementing. In Glide, code is ran once and thrown away. You canā€™t have variables in the code that retain their values. Those variables are wiped out once the code has completed and a value is returned.

Glideā€™s javascript column is similar to calling an API. With an API, you send your request and wait for a response. You canā€™t see or access the code that the API is running. You just have to wait. The javascript column is very similar. You canā€™t interact with anything from within the code while itā€™s running. You just have to wait until it returns a value.

This would be very easy with a small bit of HTML and a web view, because we would have a lot more control over the code, but the downside is that you lose the ability to click on an item in the web view and have it open a screen within the app. Everything in Glide is in a sandbox, so we are limited in what we can do.

Iā€™m still trying to think of a better idea, but Iā€™m not sure I have one right now.

2 Likes

Thank you for your time, Jeff. Perhaps this thinking is more useful for the development of a timer or countdown. I think the previous code is acceptable for slideshow purposes. Regarding the initial loading issue, it is not only happening in this slideshow but in many cases as well. While waiting for Glide to speed up its application, letā€™s just do what we enjoy. Just to be happy. I have stepped out to breathe in some fresh air through a CSS approach. Here, time doesnā€™t need to be worried about, because itā€™s real-time:

3 Likes

Jeff, Iā€™m seeking your permission to incorporate your speed up trigger code to enhance my previous slideshow topic. Are you okay with that?

1 Like

Yes of course. Use it however you want.

2 Likes

hi @Himaladin , I wanted to incorporate another table in the slide show and switch between the 2 tables every few days. So I configured another collection, which seemed to be working fine and then I added it to the container.
But for some reason, the new collection would only appear on pc browsers and not on the mobile phone.

Do you have any ideas on why this is the case?