Code Snippet

Home » Code Snippets » JavaScript » Different Stylesheet Pending the Time of Day

Different Stylesheet Pending the Time of Day

<script type="text/JavaScript">
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

<noscript><link href="main.css" rel="stylesheet" type="text/css"></noscript>

Name your css files accordingly: night.css, day.css, etc... One cool bonus is that since JavaScript gets the time from the local machine instead of from the server, users will be served the time-based stylesheet based on their time, not the server's, which may be in a completely different timezone.

If JavaScript is disabled in the browser, it will default to the main.css stylesheet.

Subscribe to The Thread

  1. Euan

    depending not pending.

    but very useful

    Reply ↓
  2. Nicolas Bouliane

    Correct me if I’m wrong, but wouldn’t using PHP be much more appropriate, since the browser would not have to load the code from the server? Besides, it would hide the code from the user, preserving the magic!

    Reply ↓
    • josh

      Using php is only useful if you want to use the server’s time. PHP cannot get the user’s time because the browser doesn’t send information that way. If you want to base your instances off the user’s time, you have to use a client side script rather than a server side.

      (Makes sense if you think about it, the server side lang date object would return the server’s date/time, while the client side lang date object would return the client’s date/time)

  3. Attila Hajzer

    could you also do this with Resolution. like depending on the resolution use this stylesheet, instead of This. ?

    Reply ↓
  4. Billy Brown

    If somebody is on the website during the change, will the whole css, as well as the new pictures (in the new css) have to load? Because that might not look too nice.

    Reply ↓
  5. Damien

    Very useful indeed. I generally have an option for the user to choose their desired css when logged in but this could be very nice to have included. Thanks!

    Reply ↓
  6. Poole Web Design

    Hi, great little script. However, I want to add a class to the body as well using 

    
 if (0 <= currentTime&&currentTime  < 5) {
		  $('body').addClass('night');
       document.write("<link rel='stylesheet' href='night.css' type='text/css' >");
      }

    It’s adding the stylesheet, just not the class on body – any ideas?

    Reply ↓
  7. Easy Webs

    **BUMP**! Any ideas on the above? Would be amazingly helpful to a few people I’d imagine.

    Thanks

    Reply ↓
  8. Travis

    @Easy Webs, my guess is your script is executing before the body tag has loaded, so jQuery can’t find it. You need to wrap that code in a document ready, or run it at the bottom of the page.

    $(document).ready(function() { 

})
    Reply ↓
  9. Easy Webs

    Hi Travis,

    Yes, that worked perfectly – it was the fact it just couldn’t find the body tag. I must have picked up some bad advice elsewhere that to get this to execute immediately, I could dispense with the document .ready…but it it needs this to find the element on the page!

    Thanks a million, now I can swap the stylesheet and do some class specific stuff depending on the time of day…sweeeet.

    Paul

    Reply ↓
  10. e11world

    This is very great. I will definitely use this for my next project

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~