Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing Style Sheets Automatically

    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.

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    399
    Thanks
    2
    Thanked 30 Times in 30 Posts
    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
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    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.
    OracleGuy

  • #4
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    399
    Thanks
    2
    Thanked 30 Times in 30 Posts
    <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
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can string together your cases, though, and not repeat a bunch of code.

    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>

  • #7
    New to the CF scene
    Join Date
    Jan 2004
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone. I'll give this a try. I really appreciate the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •