@Norm, I just implemented this countdown timer for a client on their website as they are launching their online store Nov. 1st at noon. Even though it previews fine when inspecting it on a simulated iPhone device in Chrome, it’s not displaying correctly on an actual iPhone device. This is very time-sensitive as it’s been implemented and their launch is coming up quickly. Do you have any idea of what the problem is and how to fix the code?
NOTE: I had to remove the hours, minutes and seconds on small and extra small device sizes until I’m able to fix it. So Perhaps you can just create a countdown timer and test the code yourself on an iPhone to replicate the issue?
Hi @Creative, FYI it doesnt work in Safari on the desktop either nor iPad, Chrome is fine. So it looks like a Safari thing. I am running Catalina and iOS13, so it will be interesting to see if someone with an older version of Safari is having issue.
On an unrelated point, you might want to edit the blocs.js file and set the offset value for the nav sticky so it doesn’t jump suddenly. Its default is 0.
@PeteSharp, thanks for the info. I’m not too familiar with JS. What should I set the offset value to? Also, I wonder why its default is set up wrong in Blocs?
The number of pixels you need, usually the height of the content before the navigation reaches the top of the window.
Its actually set correctly for the way the navigation bloc is designed - for the menu to be at the very top. I’m not sure if @Norm plans to add some variables to it?
But its rather easy to add your own customisation for it. You could disable the built in sticky (so you dont need to edit the bloc.js) and do something like the following docs…
Basically you’re looking just at the script and the HTML. You will notice the DIV for the menu has an ID, that ID is what is targeted with the script. When it reaches the top, it applies the sticky class.
I’m sorry but I tried to set it up, by entering the code snippet into a HTML widget and there’s nothing showing up when I preview. I’m getting an error:
