Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
Anything Goes: Seeking Advice: Time of day triggering web design event change
Bottom of Page1 to 6 of 6
-
Greetings,
I’m the creative coordinator for a media project dedicated to a group of small suburban community towns. In addition to print media (my strongest skill set), one focus of our project is a website reflecting life in our general area. I am constantly seeking ways to make this presentation innovative and unique.
Here is the challenge: I would like to have a visual change occur in the visual design of the home page of our website from a day time theme to a night time theme. The change would be triggered by the time of day similar to the sunrise and sunset of the day (such as 6:00 a.m. to 6:00 p.m.).
I’m sure this must be possible. Is it a component of a flash time table or some other technical code element that would cause this effect repetitiously?
I would sincerely appreciate any comments and/or solutions.
Thank you,
Chuck -
Why not add in some PHP code or something to load a different stylesheet based on the time of day? It seems pretty simple...
Try this:
<head>
<?php
// Use the daytime stylesheet by default.
$stylesheet = 'daytime';
// Find the current hour.
$hour = (int)date('G');
// If it's night, use the nighttime stylesheet.
if ($hour < 6 || $hour >= 18) $stylesheet = 'nighttime';
?>
<link href="/stylesheets/<?php echo($stylesheet); ?>.css" media="screen" rel="stylesheet" type="text/css" />
</head>You could even extend this to have more than 2 distinct choices...
-
or in javascript:
<script>
if(new Date().getHours() > 18){
document.write('<link rel="stylesheet" type="text/css" href="css/nightStyles.css"/>');
} else {
document.write('<link rel="stylesheet" type="text/css" href="css/dayStyles.css"/>');
}
}
</script> -
Better use something like this:
document.getElementById("[theIdOfYourStyleSheet]").href = "...";
instead of
document.write -
The only reason to do this in javascript is if you don't have a server-side language available. With javascript, you have to worry about browser issues, and you're relying on the user having javascript enabled. In morganp's example, if the user has javascript disabled, they won't get either stylesheet.
-
Another difference between using JS and using a server-side language is that if you use JavaScript, the "current time" will be the time set by the viewer's computer. Using a server-side language, the time is from the server. Each way has its up/downside.
1 to 6 of 6