time-sensitive css stylsheet switching using javascript

Question

I'm trying to switch my css stylesheets depending on the time. One during the day, and one during the night. I'm a newbie when it comes to java, but i've been reading alot on javascript and have generated some code that should let this work. I tried it, of course, it doesn't work.

I tried placing the code in the header, then I tried placing it directly after the tag.But that didn't work either.

The the css stylesheet works by itself, but doesn't work at all when used in the script. This leads me to believe that it's the script that is not right. Maybe I wrote it wrong?

Here is the javascript code:

<script language="JavaScript">
  var d=new Date();
  var twi_am_start = 4;
  var twi_am_end = 5;
  var twi_pm_start = 17;
  var twi_pm_end = 18;
  if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">'); 
  else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) 
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">'); 
  else
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">'); 
</script>

Java and JavaScript are to completely separate and unrelated things. — user229044, Dec 05 '10 at 04:45
This is probably a typo but you document.write doesn't write anything? — Amir Raminfar, Dec 05 '10 at 04:46
josh , you might be using some server side code right , write a function which return day or night , and then include your css accordingly — kobe, Dec 05 '10 at 04:46
@josh , do it on the server side while including the style sheet thats always better way to do it , why do you want to include a style sheet from javascript — kobe, Dec 05 '10 at 04:51
@josh for example if user blocks js by mistake in his browser , the whole website breaks and looks ugly , but if you do it server side its safe — kobe, Dec 05 '10 at 04:52
I'm doing this on a Tumblr page. So, the html is not on my server. Having a script on my server sounds nice. But I honestly have no idea how to do it. I really just need the background to change during day & night. Everything else will stay the same. — Josh Tha CreativeOne, Dec 05 '10 at 05:03
@josh , have two background with respective images and change it based on your timer/// are you using jquery?? — kobe, Dec 05 '10 at 05:07
No, i'm not using jquery. The code was given to me from somebody who claimed to know what they were doing, I changed the href paths and placed it where i thought it would go. I'm going to take your advice about programming something on my server and making it work. Although I have no clue how to do this yet. — Josh Tha CreativeOne, Dec 05 '10 at 05:38

Larry K · Answer 1 · 2010-12-05T15:26:14.423

2

Rather than changing css files, I suggest that you change a class on the body element from "day" to "night". Then use the class selector in the css file.

css file
.day h2 {font-weight: bold;}
.night h2  {font-weight: normal;}
... etc

Updated: Then use Javascript document.body.className='day'; to change. Thanks to @Phrogz for the JS. (See comment to this answer.)

edited Dec 05 '10 at 15:26

answered Dec 05 '10 at 04:49

Larry K

47,808
15
87
140

1

Much simpler than fighting browser support for enabling/disabling stylesheets, or writing out different link tags (ick). jQuery isn't really needed, either: the 26k of jQuery doesn't justify the few character savings for `$(body).addClass('day');` versus `document.body.className='day';` – Phrogz Dec 05 '10 at 05:05
You could even do this with two separate style sheets (one with every item starting with .night and one with .day) to make it easier to image/style the differences – Andrew Jackman Dec 05 '10 at 08:08

score 1 · Answer 2 · answered Dec 05 '10 at 04:48

Try making that code readable:

var d = new Date();

var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;

if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end)
{
  document.write('');
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
  document.write('');
} else {
  document.write('');
}

This article should be of great assistance: http://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/.

Here's the example code, which should suffice for your needs:

<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>

Good luck!

is it a nice way to include style sheets on the javascript side , i don't think its a good practice , if at all he wants to change something in the UI , he should do it through javascritp or give a differnt css names — kobe, Dec 05 '10 at 04:53
I was just helping him/her to make the code work. Personally, I would *never* use JS for such a thing, as PHP would be my weapon of choice for such a task. — Blender, Dec 05 '10 at 04:55
I would rather prefer JS methob, because day and night time may differ from server time to client's local time. — Arda, Jun 08 '11 at 07:02

score 1 · Answer 3 · answered Dec 05 '10 at 04:51

1

Your script seems to write a blank screen to the page regardless of what condition is true.

I suggest adding a class to the body depending on which branch of your if/else is reached.

function setTimesStyles(){
  if( ... )
    document.body.className = 'morning';
  else
    document.body.className = 'evening';
}

If you put this in a function, as I have done, you can call it on page load like this:

<body onload="setTimeStyles();">

That way you can put the code in the section of your document.

By setting this class name, you can then write CSS rules for morning or evening by prefacing them with ".morning" or ".evening" like this:

.morning h1{ color:blue; }
.evening h1{ color:red; }

answered Dec 05 '10 at 04:51

Nathan Manousos

13,328
2
27
37

i agree with you , this is nice approach , getting the css files conditionally from a javascript file is not at all a good approach , probably we should suggest him – kobe Dec 05 '10 at 04:55
I suggest that you edit your answer to not suggest the use of the `onload` HTML attribute. `window.onload=setTimeStyles;` is far more appropriate. – Phrogz Dec 05 '10 at 05:08
I wasn't sure of the browser compatibility of those. Actually not sure for document.body.className either. I'm spoiled by frameworks. – Nathan Manousos Dec 05 '10 at 06:36

kobe · Answer 4 · 2010-12-05T05:07:12.587

0

for example asp

you can achieve it through server side code while including the style sheet.

<%if day then%>

<LINK href="day.css" rel="stylesheet" type="text/css">

<%else %>

<LINK href="night.css" rel="stylesheet" type="text/css">

<%
end if%>

with jquery u can do as below

wrap it over in your if class

("body").removeClass('bg2').addClass("bg1");

("body").removeClass('bg1').addClass("bg2");

edited Dec 05 '10 at 05:07

answered Dec 05 '10 at 04:48

kobe

15,671
15
64
91

@all , my sincere advice is to do include at the server level, don't use javascript...// – kobe Dec 05 '10 at 04:56

score 0 · Answer 5 · answered Dec 05 '10 at 05:01

0

Here's a good script that allows you to switch CSS style sheets at runtime.

answered Dec 05 '10 at 05:01

Phrogz

296,393
112
651
745

Paul Schreiber · Answer 6 · 2010-12-05T05:00:57.407

-2

You need to wait until the DOM has finished loading before performing this manipulation.

Here's how to do this using jQuery:

<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function() {
var d=new Date();
var twi_am_start = 4;
var twi_am_end = 5;
var twi_pm_start = 17;
var twi_pm_end = 18;
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start ) {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">').appendTo("head");;
} else {
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");;
}
});
//]]>
</script>

edited Dec 05 '10 at 05:00

answered Dec 05 '10 at 04:45

Paul Schreiber

12,531
4
41
63

No he doesn't. He is not doing anything with the dom. He can just use document.write to write a style link on the header. Which is not document.write('') – Amir Raminfar Dec 05 '10 at 04:47
`document.write` won't work after the page has loaded. Read the documentation. – PleaseStand Dec 05 '10 at 04:47
Why would you use `document.write()` in the first place to perform stylesheet switching...? – Blender Dec 05 '10 at 04:49
The original posted code had nothing in the document.write(), so I couldn't see what he was doing. The correct approach is not to use document.write at all, but manipulate the DOM to add the new link tag. – Paul Schreiber Dec 05 '10 at 04:51

time-sensitive css stylsheet switching using javascript

6 Answers6