Results 1 to 5 of 5

Thread: Change main header background picture depending on time of day...

  1. #1
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Cool Change main header background picture depending on time of day...

    Hi

    I would like to be able to change my main header background picture, depending on the time of day, I.e

    1) Morning 06h00<>10h00
    2) Day 10h00<>16h00
    3) Dusk 16h00<>19h00
    4) Night 19h00<>06h00

    In my CSS file I have a line that say :

    Code:
    #header{background-image:url(../../img/steback.jpg);}
    But I need to add 3 more imgs and script to make then change per time of day, thanks in advance
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    /* set header default bg in a stylesheet by id (This must be the night image - the one that spans the crossover to a new day) */
    #header{background-image:url(../../img/steback.jpg); visibility: hidden;}
    </style>
    </head>
    <body>
    <div id="header"></div>
    <script>
    "use strict";
    (function(){ // anonymous function wrapper keeps variable and function names out of the global scope
    	var timespans = [ // use as many timespans as you want, times should be sequential
    		{bg: "../../img/steback1.jpg", start: '6:00', end: '9:59'}, // {bg: "image", start: 'hour:minute', end: 'hour:minute'}
    		{bg: "../../img/steback2.jpg", start: '10:00', end: '15:59'},
    		{bg: "../../img/steback3.jpg", start: '16:00', end: '19:59'}
    	], c = timespans.length, tsl = c, units = ['Hours', 'Minutes', 'Seconds'], // get timespans length, establish units for 'tomillis' conversion
    		the_header = document.getElementById('header').style; // reference the header's style
    	while (--c > -1) {
    		timespans[c].start += ':00'; timespans[c].end += ':59'; // add seconds to start and end times for more precise processing
    		(function(c){ //create closure to preload each potential image
    			var nbg = new Image();
    			nbg.addEventListener('load', function(){timespans[c].loaded = true;}, false);
    			nbg.addEventListener('error', function(){timespans[c].error = true;}, false);
    			nbg.src = timespans[c].bg;
    		})(c);
    	}
    	function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
    		cdtime = cdtime.split(':');
    		var d = new Date(), t = -1;
    		while(++t < 3){	d['set' + units[t]](+cdtime[t]);}
    		return d.getTime();
    	}
    	function waitforload(ts){
    		if(ts.loaded){
    	 		the_header.backgroundImage = 'url(' + ts.bg + ')';
    		} else if(!ts.error) { // if the background image is still potentially available and hasn't loaded yet, try again
    			return setTimeout(function(){waitforload(ts);}, 300);
    		}
    		the_header.visibility = 'visible';
    	}
    	function changeheaderbg(){
    		var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
    		while (++c < tsl) { // check timespan to find a match
    			if((lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
    				waitforload(timespans[c]); // if found, attempt to set header's bg to timespan's bg
    				break;
    			} else {lim = null;} // reset lim to false like value
    		}
    		c = -1; // reset c for next run through
    		if(!lim){
    			the_header.backgroundImage = ''; // no match found, revert to default
    			the_header.visibility = 'visible';
    			lim = tomillis(timespans[0].start);
    			lim += curtime > lim? (24 * 60 * 60 * 1000) : 0;
    		}
    		setTimeout(changeheaderbg, lim - curtime + 1500); // run again at one and a half seconds after a new period would start
    	}
    	changeheaderbg(); // initial run of the changeheaderbg function
    })(); // end anonymous function wrapper
    </script>
    </body>
    </html>
    Any questions, just let me know.
    Last edited by jscheuer1; 10-07-2017 at 02:03 PM. Reason: add visibility hidden for prior to load - later, add fixes
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    As always John you're amazing, and always help me..... many many thanks as always, and have a great weekend ahead....
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I think I see a problem. I'll let you know.
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Yes there was a problem. I'm fixing it here and in the original:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    /* set header default bg in a stylesheet by id (This must be the night image - the one that spans the crossover to a new day) */
    #header{background-image:url(../../img/steback.jpg); visibility: hidden;}
    </style>
    </head>
    <body>
    <div id="header"></div>
    <script>
    "use strict";
    (function(){ // anonymous function wrapper keeps variable and function names out of the global scope
    	var timespans = [ // use as many timespans as you want, times should be sequential
    		{bg: "../../img/steback1.jpg", start: '6:00', end: '9:59'}, // {bg: "image", start: 'hour:minute', end: 'hour:minute'}
    		{bg: "../../img/steback2.jpg", start: '10:00', end: '15:59'},
    		{bg: "../../img/steback3.jpg", start: '16:00', end: '19:59'}
    	], c = timespans.length, tsl = c, units = ['Hours', 'Minutes', 'Seconds'], // get timespans length, establish units for 'tomillis' conversion
    		the_header = document.getElementById('header').style; // reference the header's style
    	while (--c > -1) {
    		timespans[c].start += ':00'; timespans[c].end += ':59'; // add seconds to start and end times for more precise processing
    		(function(c){ //create closure to preload each potential image
    			var nbg = new Image();
    			nbg.addEventListener('load', function(){timespans[c].loaded = true;}, false);
    			nbg.addEventListener('error', function(){timespans[c].error = true;}, false);
    			nbg.src = timespans[c].bg;
    		})(c);
    	}
    	function tomillis(cdtime){ // converts start and end colon delimited times to milliseconds since 1970/01/01
    		cdtime = cdtime.split(':');
    		var d = new Date(), t = -1;
    		while(++t < 3){	d['set' + units[t]](+cdtime[t]);}
    		return d.getTime();
    	}
    	function waitforload(ts){
    		if(ts.loaded){
    	 		the_header.backgroundImage = 'url(' + ts.bg + ')';
    		} else if(!ts.error) { // if the background image is still potentially available and hasn't loaded yet, try again
    			return setTimeout(function(){waitforload(ts);}, 300);
    		}
    		the_header.visibility = 'visible';
    	}
    	function changeheaderbg(){
    		var curtime = new Date().getTime(), lim; // current milliseconds since 1970/01/01, var to later hold the current end time
    		while (++c < tsl) { // check timespan to find a match
    			if((lim = tomillis(timespans[c].end)) >= curtime && curtime >= tomillis(timespans[c].start)){
    				waitforload(timespans[c]); // if found, attempt to set header's bg to timespan's bg
    				break;
    			} else {lim = null;} // reset lim to false like value
    		}
    		c = -1; // reset c for next run through
    		if(!lim){
    			the_header.backgroundImage = ''; // no match found, revert to default
    			the_header.visibility = 'visible';
    			lim = tomillis(timespans[0].start);
    			lim += curtime > lim? (24 * 60 * 60 * 1000) : 0;
    		}
    		setTimeout(changeheaderbg, lim - curtime + 1500); // run again at one and a half seconds after a new period would start
    	}
    	changeheaderbg(); // initial run of the changeheaderbg function
    })(); // end anonymous function wrapper
    </script>
    </body>
    </html>
    Additions/changes highlighted - There were logical flaws in what happens when the default is used, both in recognizing that, and accurately setting the timeout for the next check.
    - John
    ________________________

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

Similar Threads

  1. Replies: 16
    Last Post: 09-18-2017, 03:42 PM
  2. change picture after given time
    By mukkii in forum PHP
    Replies: 10
    Last Post: 06-28-2010, 07:33 PM
  3. Change Content Depending On Time Of Day?
    By matt blank in forum JavaScript
    Replies: 13
    Last Post: 11-06-2009, 12:12 AM
  4. how to change text and background color same time
    By ultimate-tester in forum JavaScript
    Replies: 3
    Last Post: 02-27-2008, 08:13 AM
  5. I am looking for a PHP code that would change an image depending on the time of day.
    By ayeayeshrew in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-11-2007, 01:30 AM

Tags for this Thread

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
  •