Log in

View Full Version : CSS background that changes based on time


gosteelers
12-14-2009, 01:13 AM
Hello,

While visiting http://www.aeromexico.com/en_us/ I noticed that if you visit the time during the day, the background on the website features "sunny clouds" in the afternoon the background changes to sunset, at night, it shows night with starts. I looked at the CSS code and could not quiet figure the script out, any help?

Here's the direct link to the .CSS http://aeromexico.com.lg1x8zmax.simplecdn.net//_css/amex.css?t=200912101026
jscheuer1
12-14-2009, 03:26 AM
This smells like a server side setup that may or may not have a javascript component. It could all be done with javascript though. Using the javascript date object, one may determine the time of day as reported by the user's computer and show a different background-image based based upon that.

Something like:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
var now = new Date().getHours(),
pics = ['http://i19.tinypic.com/2mdl82c.jpg', 'http://s4.tinypic.com/2u55qj8_th.jpg', 'http://s4.tinypic.com/2qkqjjt_th.jpg'];
now = now > 5 && now < 12? 0 : now >= 12 && now < 19? 1 : 2;
document.documentElement.style.backgroundImage = 'url(' + pics[now] + ')';
})();
</script>
</head>
<body>

</body>
</html>
jscheuer1
12-14-2009, 05:13 PM
Here's a more robust example:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: transparent;
}
</style>
<script type="text/javascript">
/* Time of Day Background Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
(function(){
var now, pics = {
morning: 'http://i19.tinypic.com/2mdl82c.jpg',
afternoon: 'http://s4.tinypic.com/2u55qj8_th.jpg',
night: 'http://s4.tinypic.com/2qkqjjt_th.jpg',
show: function(){
return now > 5 && now < 12? this.morning : now > 11 && now < 19? this.afternoon : this.night;
}
};(function(){
now = new Date().getHours();
document.documentElement.style.backgroundImage = 'url(' + pics.show() + ')';
if(typeof pics.interval === 'undefined'){
pics.interval = setInterval(arguments.callee, 10000);
}
})();
})();
</script>
</head>
<body>

</body>
</html>
gosteelers
12-15-2009, 12:16 AM
Awesome!

Thanks.


Here's a more robust example:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: transparent;
}
</style>
<script type="text/javascript">
/* Time of Day Background Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
(function(){
var now, pics = {
morning: 'http://i19.tinypic.com/2mdl82c.jpg',
afternoon: 'http://s4.tinypic.com/2u55qj8_th.jpg',
night: 'http://s4.tinypic.com/2qkqjjt_th.jpg',
show: function(){
return now > 5 && now < 12? this.morning : now > 11 && now < 19? this.afternoon : this.night;
}
};(function(){
now = new Date().getHours();
document.documentElement.style.backgroundImage = 'url(' + pics.show() + ')';
if(typeof pics.interval === 'undefined'){
pics.interval = setInterval(arguments.callee, 10000);
}
})();
})();
</script>
</head>
<body>

</body>
</html>