CODEWITHSUNDEEP
javascriptjquerydom
DSA Web Specialists
DSA Web Specialists

Reputation: 311

Change CSS based on time of date or time of day

I have a question about loading a JavaScript that changes the CSS based on the time of day or date.

Question: How can I cache the images so that they do not load from page to page? The Script works fine and adds the class to the body and header based on the time of day. However, when a user clicks the next page of the website, it reloads the same CSS Class and causes the site to flash to white before loading the CSS.

I've placed the script at the bottom of the page and in the header. Yet it still flashes on every page that loads the script. Is there away to prevent the script from loading everytime the user goes from page to page?

Here is the Js Code. 

function TimeOfDaySiteChange() {
    var d = new Date();
    var n = d.getHours();

    if (n < 5) {
        // midnight
        night();
    } else if (n > 16 && n < 20) {
        // If time is between 5PM &ndash; 8PM sunset theme to 'body'
        dusk();
    } else if (n > 19) {
        // If time is 8PM 
        night();
    } else if (n > 8) {
        // If time is 9AM
        daytime();
    } else {
        // Else use 'dawn' theme
        dawn();
    }
}

function dawn() {
    jQuery('body').addClass('sunrise_bg');
    jQuery('#header_masthead').addClass('sunrise_masthead_bg');
}

function daytime() {
    jQuery('body').addClass('day_bg');
    jQuery('#header_masthead').addClass('day_masthead_bg');
}

function dusk() {
    jQuery('body').addClass('sunset_bg');
    jQuery('#header_masthead').addClass('sunset_masthead_bg');
}

function night() {
    jQuery('body').addClass('night_bg');
    jQuery('#header_masthead').addClass('night_masthead_bg');
}

function init() {
    TimeOfDaySiteChange();
}

window.onload = init;

I've also tried it without window.onload

Upvotes: 2

Views: 5324

Answers (2)

James Montagne
James Montagne

Reputation: 78630

Your best bet would be to put this as the very first thing in your body and remove the window.onload. You would need to tweak your css slightly so that you only change the class on the body:

.sunrise_bg #header_masthead{

instead of having a class on the #header_masthead.

Then run TimeOfDaySiteChange() as the very first thing in your body.

By using onload you are waiting for the entire page to load before applying your class.

Alternatively, if you're using html5, you could change your code to add the class to the html element and place your javascript early in the head of your document. This may be slightly faster.

Upvotes: 4

sd7syfsk
sd7syfsk

Reputation: 61

Is there away to prevent the script from loading everytime the user goes from page to page?

In short, no. Your current implementation dynamically adds classes (based on the time of day) with Javascript. You need the Javascript to run on every page in order for the classes to be added.

You can use the method as suggested by James https://stackoverflow.com/a/16281934/2174104 to minimise the time it takes for the function to run, but there is no way to load the background colour once and keep it if your site uses separate html documents.

Upvotes: 1

Related Questions