Scheduled hiding of elements (custom code)

Will there be a way of having elements visible and hidden according to scheduled times?

For an example, a photo or video appearing at noon as background, and than changing to another at night. So two elements, one will be hidden while the other visible, and vice versa?

Im want to do it for a video background element that will change videos at night and day.
If there is an Amazon server where i host the videos to stream, there should not be a problem with timing i believe because the server is set on local time.

@bartekkustra & @PixelGeek im tagging both of you ninjas :smile:

Thanks!
Nir

First!

<script>
	var now = new Date();
	var hours = now.getHours();
	if(hours >= 8 && hours <= 22){
	    $('.that-background-class').addClass('night');
	}
	else{
	    $('.that-background-class').removeClass('night');
	}
</script>

Just have a background for a day and add a new class in Webflow (nested class) to that background that will be called night and change the background-image in webflow editor.

If you want to show a video you will need to show or hide it with javascript as well. $('.video-class').fadeIn(); and $('.video-class').fadeOut();

Notice!

That script will check on a current client time, so if you are in US and it's 6am you will see nightly background. I am from Poland so I'm +6/+9 hours from you so I'll see daily background.
1 Like

Hi @bartekkustra thank you so much for your response!

so pretty much like this?

<script>
var now = new Date();
var hours = now.getHours();
var dayMode = hours24 < 12 ? "am" : "pm";
if(hours >= 19 && hours <= 7){
    $('.night').show();
}
else{
    $('.night').hide();
}

and

<script>
var now = new Date();
var hours = now.getHours();
var dayMode = hours24 < 12 ? "am" : "pm";
if(hours >= 7 && hours <= 19){
    $('.day').show();
}
else{
    $('.day').hide();
}

Hide and show instead of fade in and out.

Correct?

Hi @bartekkustra its not working, what did i do wrong?

Can you provide a link to your website?

Hi @bartekkustra

Here is the Public Link

I thinks its working, i just need to add 2 more for sunrise and sunset or anything in between :smile:
The only thing im wondering about is the fade in and fade out option, can there be another option to have the element hidden and visible (block, show none)? So the site wont be too “heavy”, the embed element will become - block when needed so all the other videos wont need to load also, only when they are being called to appear?

Also i will be able to give them a “show-none” property in the webflow designer platform which will make it easier to work on the rest of the site.

With thanks,
Nir

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.