Results 1 to 4 of 4

Thread: CSS background that changes based on time

  1. #1
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CSS background that changes based on time

    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.simp...t=200912101026

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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>
    Last edited by jscheuer1; 12-14-2009 at 04:03 AM. Reason: add example
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Here's a more robust example:

    Code:
    <!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>
    Last edited by jscheuer1; 12-15-2009 at 01:28 AM. Reason: remove unused var 'p', minor efficiency
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    gosteelers (12-14-2009)

  5. #4
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Awesome!

    Thanks.

    Quote Originally Posted by jscheuer1 View Post
    Here's a more robust example:

    Code:
    <!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>
    Last edited by jscheuer1; 12-15-2009 at 01:29 AM. Reason: remove unused var 'p', minor efficiency

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •