...

View Full Version : Changing Style Sheets Automatically



cbozman
01-05-2004, 09:58 PM
Does anyone know a javascript or other way to have your style sheets change automatically upon a certain date or season.

I've seen switchers that work with buttons, and I've seen scripts that can change page backgrounds based on months or seasons, but I cannot find a way to do style sheets automatically.

WARNING: I'm not a javascript writer/developer. My forte lies in HTML and CSS.

Any help is greatly appreciated.

COBOLdinosaur
01-06-2004, 01:40 AM
Create a style sheet for each month named mon0.css through mon11.css
then put this in the head of the pages:

<script type="text/javascript">
thedate= new Date();
str='<link rel"stylesheet" type="text/css" href="mon'+thedate.getMonth()+'.css">';
document.write(str);
</script>

It will then load the css for the month

oracleguy
01-06-2004, 02:08 AM
Make sure to declare an alternate stylesheet, in case someone doesn't have javascript enabled. Otherwise they wouldn't be able to use your site very well.

cbozman
01-06-2004, 03:15 PM
Thanks COBOLdinosaur, I think that might get me close, but I'm specifically looking for it to change with the seasons. Is there a way to edit the code you provided to make it more date/season specific?

COBOLdinosaur
01-07-2004, 12:22 AM
<script type="text/javascript">
var sheet='';
thedate= new Date();
themonth=thedate.getMonth();
theday=thedate.getDate();
switch (themonth)
{
case 0 : sheet='winter'; break; //January
case 1 : sheet='winter'; break;
case 2 : sheet=(theday<22)? 'winter' : 'spring'; break; //March
case 3 : sheet='spring'; break;
case 4 : sheet='sprint'; break;
case 5 : sheet=(theday<22)? 'spring' : 'summer'; break; //June
case 6 : sheet='summer'; break;
case 7 : sheet='summer'; break;
case 8 : sheet=(theday<22)? 'summer' : 'autumn'; break; // September
case 9 : sheet='autumn'; break;
case 10 : sheet='autumn'; break;
case 11 : sheet=(theday<22)? 'autumn' : 'winter'; break; //December
}
str='<link rel"stylesheet" type="text/css" href="'+sheet+'.css">';
document.write(str);
</script>


You will need to adjust which day is shifts, a can vary by a day or two year to year

Choopernickel
01-07-2004, 02:47 PM
You can string together your cases, though, and not repeat a bunch of code.


<script type="text/javascript">
var sheet='',
thedate= new Date(),
themonth=thedate.getMonth(),
theday=thedate.getDate();
// This brings the split months into line with the non-split months,
// and while 22nd isn't always the season divider, it's good enough.
if ((themonth+1) % 3 == 0 && theday < 22) {
themonth--;
}
switch (themonth) {
case 11 : //late dec
case 0 : //jan
case 1 : //feb, early mar
sheet='winter';
break;
case 2 : //late mar
case 3 : //apr
case 4 : //may, early jun
sheet='spring';
break;
case 5 : //late jun
case 6 : //jul
case 7 : //aug, early sep
sheet='summer';
break;
case 8 : //late sep
case 9 : //oct
case 10 : //nov, early dec
sheet='autumn';
break;
}
</script>

cbozman
01-07-2004, 03:24 PM
Thanks everyone. I'll give this a try. I really appreciate the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum