Seasonal Style Sheets

Need a script to switch styles

[mudguts]

DOCTYPE: XHTML 1.0 transitional
I'm designing a website using css. I'd like to have the color scheme updated based on the season (different style sheets). Is there a javascript function that would get the month on loading the page and automatically call up the appropriate style sheet?

[mudguts]

Found something. It may be crude, it may be flawed, but it's working so far:

<script type="text/javascript">
function load_css(url) {
var e = document.createElement("link");
e.href = url;
e.type = "text/css";
e.rel = "stylesheet";
e.media = "screen";
document.getElementsByTagName("head")[0].appendChild(e);
}

window.onload = function( ) {
var date = new Date;
var month = date.getMonth( ) + 1;

// only run between december and february
if ((12 <= month) && (2 >= month)) {
load_css("winter.css");
}
// only run between march and may
else if ((3 <= month) && (5 >= month)) {
load_css("spring.css");
}
// only run between june and august
else if ((6 <= month) && (8 >= month)) {
load_css("summer.css");
}
// only run between september and november
else if ((9 <= month) && (11 >= month)) {
load_css("fall.css");
}
}
</script>

Any comments?

[daveVk]

if ((12 <= month) && (2 >= month))

First condition is always true

Calculate Quarter directly

var Q = ( ( month + 1 ) / 4 ) + 1;
if ( Q == 5 ) { Q = 1; } // december

Even better if can be done on server side.

Seasons only correct for half the world !

[mudguts]

Thanks for the comment. I realize now that the first condition wouldn't work. And, quite right, the seasons are limited to the northern hemisphere (not too worried about that, actually).
I'm not a developer, just a graphic artist, so my javascripting is very limited. By server side do you mean php or sth similar? I was hoping to avoid that. Could you elaborate on the quarter calculation, can't really follow.
Thanks

[daveVk]

Yes PHP or similar would probably be more efficient and does not need javascript enabled.

As all season are 3 months ( 1/4 of year )

var Q = Math.floor( ( month + 1 ) / 4 ) + 1;
if ( Q == 5 ) { Q = 1; } // december fudge
//
if ( Q == 1 } { load_css("winter.css"); }
else if ( Q == 2 } { load_css("spring.css"); }
else if ( Q == 3 } { load_css("summer.css"); }
else if ( Q == 4 } { load_css("fall.css"); }

[mudguts]

Thanks, daveVk, for the detailed update, but I still don't know how to insert it into the script. This is what I've done:

<script type="text/javascript">
function load_css(url) {
var e = document.createElement("link");
e.href = url;
e.type = "text/css";
e.rel = "stylesheet";
e.media = "screen";
document.getElementsByTagName("head")[0].appendChild(e);
}

window.onload = function( ) {
var date = new Date;
var month = date.getMonth( ) + 1;
var Q = Math.floor( ( month + 1 ) / 4 ) + 1;
if ( Q == 5 ) { Q = 1; } // december fudge //
if ( Q == 1 } { load_css("winter.css"); }
else if ( Q == 2 } { load_css("spring.css"); }
else if ( Q == 3 } { load_css("summer.css"); }
else if ( Q == 4 } { load_css("fall.css"); }
}
</script>

This doesn't work, i.e., the stylesheet doesn't load (should be summer where I am). What have I overlooked, forgotten, ignored?

[daveVk]

Sorry my typo by 4

if ( Q == 1 ) { load_css("winter.css"); }
else if ( Q == 2 ) { load_css("spring.css"); }
else if ( Q == 3 ) { load_css("summer.css"); }
else if ( Q == 4 ) { load_css("fall.css"); }

[mudguts]

Aah, yes, it works now. Should have seen that one myself. Tested by changing the clock on my computer.
Thanks a bunch!

[daveVk]

var Q = Math.floor( ( month + 1 ) / 3 ) + 1;

On second thought think that should be 3
12(months) / 3 = 4 seasons

Please check

[mudguts]

Yes, of course - the simplest of calculations! I hadn't checked all the months, was just concerned about the loading of a new style sheet. I think we're nearly there. What changes do I need to make to Q? At the moment the season switch occurs one month too soon. May - Jul = summer, when ideally it should be Jun - Aug.

[mudguts]

Well, I think I've got it now, but I'd like your approval.

var Q = Math.floor( ( month ) / 3 ) + 1;

Seems to work.

[daveVk]

Exactly ! We added 1 to month on line above.

Regards Dave

[mudguts]

Thanks, Dave, man for all seasons.