# CSS for Responsive Header **URL:** \ **Category:** Ask for Help\ **Created:** [May 12, 2024, 11:12pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303 "2024-05-12T23:12:54Z")\ **Posts on this page:** 20\ **Page:** 6
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 3:44am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/101 "2024-05-15T03:44:17Z")
yes, twice as fast. It’s superb! I won’t have to spend time making gifs, lol ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [May 15, 2024, 3:48am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/102 "2024-05-15T03:48:42Z")
> [@Himaladin](#): > > it’s much faster now, maybe I didn’t really understand your explanation 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. > [@Himaladin](#): > > What happens if we use more than 3 columns, is it possible for the counter to update every second? 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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 3:59am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/103 "2024-05-15T03:59:52Z")
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. ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 4:00am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/104 "2024-05-15T04:00:15Z")
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? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 4:11am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/105 "2024-05-15T04:11:40Z")
@Sekayi_Liburd, If this discussion continues later, @nathanaelb will propose another title change. My first suggestion is: “CSS and javascript …” 😂 ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 4:14am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/106 "2024-05-15T04:14:31Z")
hahahaha, he will soon come again 😂 ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 4:55am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/107 "2024-05-15T04:55:12Z")
I missed this. Clever. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 5:07am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/108 "2024-05-15T05:07:30Z")
What’s this? ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 5:10am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/109 "2024-05-15T05:10:29Z")
> [@Himaladin](#): > > Sekayi, change your settings as follows, and you will see how fast the updates are in Glide. > > ![Screenshot 2024-05-14 at 22.11.09](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/0/208316411003a175fd1fe5946b012b8f041a27ab.png) 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. ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 9:12am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/110 "2024-05-15T09:12:53Z")
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 ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 9:25am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/111 "2024-05-15T09:25:37Z")
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. ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 15, 2024, 10:04am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/112 "2024-05-15T10:04:05Z")
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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 11:18am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/113 "2024-05-15T11:18:11Z")
Got it. Another style ---- Carousel with CSS 😅 ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [May 15, 2024, 11:50am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/114 "2024-05-15T11:50:29Z")
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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 11:59am UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/115 "2024-05-15T11:59:21Z")
It means frame 1 will be delayed by 10 seconds + loading time? ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [May 15, 2024, 1:47pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/116 "2024-05-15T13:47:50Z")
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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 2:02pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/117 "2024-05-15T14:02:58Z")
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: > [@film\_strip 2. Transforming Card Collection into a Slide-In Carousel with CSS](https://community.glideapps.com/t/2-transforming-card-collection-into-a-slide-in-carousel-with-css/73400): > > After a lengthy discussion with @Sekayi_Liburd and @Jeff_Hager in the “[CSS for Responsive Header](https://community.glideapps.com/t/css-for-responsive-header/73303)” workshop, and facing several challenging issues, especially regarding the duration problem based on the update time from Glide, which is now approaching completion. Now I’m stepping out briefly to explore another aspect of moving image style, which might be more appropriately called a “Carousel,” with a slide-in effect, and you are free to determine its duration. Unlike the previous topic on “[How t…](https://community.glideapps.com/t/how-to-create-an-auto-play-slideshow/73271) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [May 15, 2024, 4:41pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/118 "2024-05-15T16:41:32Z")
Jeff, I’m seeking your permission to incorporate your speed up trigger code to enhance my previous slideshow topic. Are you okay with that? ---
**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\ **Post date:** [May 15, 2024, 5:01pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/119 "2024-05-15T17:01:56Z")
Yes of course. Use it however you want. ---
**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\ **Post date:** [May 16, 2024, 10:38pm UTC](https://community.glideapps.com/t/css-for-responsive-header/73303/120 "2024-05-16T22:38:52Z")
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? [Previous page](https://community.glideapps.com/t/css-for-responsive-header/73303.md?page=5) [Next page](https://community.glideapps.com/t/css-for-responsive-header/73303.md?page=7)