Javascript Stylesheet change by time of day

frankyxl

05-31-2004, 07:52 PM

Is it possible to change stylesheet of your site, by time of day ?
I tried everything..please help :confused:

coothead

05-31-2004, 08:21 PM

Hi there frankyxl,

and a warm welcome to these forums :D

This will change the 'css' at 6am an 6pm, and if
need be, could be modified for multiple time changes...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Day and Night</title>
<link id="foo" rel="stylesheet" type ="text/css" href="style_1.css"/>
<script type="text/javascript">
//<![CDATA[
var daycontent=new Array();
daycontent[0]="style_1.css";
daycontent[1]="style_2.css";
var my_date=new Date();
var my_hour=my_date.getHours();
if(my_hour>=6&&my_hour<18)
{
my_hour=0;
}
else
{
my_hour=1;
}
var am_pm=my_hour;
document.getElementById("foo").href=daycontent[am_pm];
//]]>
</script>
</head>
<body>
<div> </div>
</body>
</html>

coothead

frankyxl

05-31-2004, 08:24 PM

fast response,
tnx i will try this out :) have to change the time to european :D

frankyxl

05-31-2004, 09:15 PM

Seems i can't change the am/pm variable, i want this script to work on european time. :( i wish i could write javascript :p

I want 4 stylesheets change by time of day (european time)
from 06:00 to 12:00 ochtend css_ochtend.css
from 12:00 to 18:00 middag css_middag.css
from 18:00 to 24:00 avond css_avond.css
from 24:00 to 06:00 nacht css_nacht.css

frankyxl

05-31-2004, 09:26 PM

<html>
<head>
<title>Dag en nacht</title>

<link id="foo" rel="stylesheet" type ="text/css" href="css_ochtend.css"/>
<script type="text/javascript">

var daycontent=new Array();

daycontent[0]="css_ochtend.css";
daycontent[1]="css_middag.css";
daycontent[2]="css_avond.css";
daycontent[3]="css_nacht.css";

var my_date = new Date();
var my_hour = my_date.getHours();

if(my_hour>=6 &&my_hour<12)
{
my_hour=0;
}

if(my_hour>=12 &&my_hour<18)
{
my_hour=1;
}
if(my_hour>=18 &&my_hour<23)
{
my_hour=2;
}
if(my_hour>=0 &&my_hour<6)
{
my_hour=3;
}

var am_pm=my_hour;
document.getElementById("foo").href=daycontent[am_pm];

</script>
</head>
<body>
</body>
</html>

coothead

05-31-2004, 10:35 PM

Hi there frankyxl,

The code works fine for me in london,
which the last time I checked,
was still a minor member of europe :D

A modified script for the four periods
that you have selected
should look like this...

<script type="text/javascript">

var daycontent=new Array();

daycontent[0]="css_ochtend.css";
daycontent[1]="css_middag.css";
daycontent[2]="css_avond.css";
daycontent[3]="css_nacht.css";

var my_date = new Date();
var my_hour = my_date.getHours();

if(my_hour>=6 &&my_hour<12) {
my_hour=0;
}
else {
if(my_hour>=12 &&my_hour<18) {
my_hour=1;
}
else {
if(my_hour>=18 &&my_hour<=23) {
my_hour=2;
}
else {
if(my_hour>=0 &&my_hour<6) {
my_hour=3;
}
}
}
}

var am_pm=my_hour;
document.getElementById("foo").href=daycontent[am_pm];

</script>

coothead

frankyxl

06-01-2004, 08:26 AM

tnx great work, but still i can't get what i did wrong :confused:
Anyway i'm going to test this, thanks a lot :thumbsup: