How to show content depending on time of day?

About this:

Adding this to your website to show content depending on the day. This could be used to show content for a targeted audience on a certain time. Per example; for a restaurant we can show the lunch menu by midday and show dinner menu by evening. Or perhaps for a clothing shop you could show shorts and hats during the day and show gala dresses during the evening.

Step 1: Adding the Script

This script should be added into the Flatsome Advance setting under Global Settings > Footer Scripts. As you may see, it looks for the classes ‘hero-morning’, ‘hero-midday’ and ‘hero-evening’. This script is looking for the time of day and manipulates DOM according to what hour of the day it is.

<script>
jQuery(function(){
    var morning = jQuery(".hero-morning");
    var midday = jQuery(".hero-midday");
    var evening = jQuery(".hero-evening");
    var d = new Date();
    var n = d.getHours();
    if (n > 0 && n < 12){
        jQuery(morning).show();
        jQuery(midday).hide();
        jQuery(evening).hide();
    } else if (n => 12 && n < 18){
        jQuery(morning).hide();
        jQuery(midday).show();
        jQuery(evening).hide();
    }else if(n => 18 && n < 24) {
        jQuery(morning).hide();
        jQuery(midday).hide();
        jQuery(evening).show();
    }
});
</script>

Step 2: Adding the CONTENT

Adding the content can be done anywhere you like with any element you wish to use as long as you can add the according class to it. In this case we used a <div> with <p> but you may use banners, section, columns or anything you like.

<div class="hero-morning">
    <p>Good morning.</p>
</div>
<div class="hero-midday">
    <p>Good afternoon.</p>
</div>
<div class="hero-evening">
    <p>Good evening.</p>
</div>