Time of Day Image Change

Change Images based on a time of day and by day

  • (2 Pages)
  • +
  • 1
  • 2

24 Replies - 9830 Views - Last Post: 08 August 2012 - 06:49 AM

#16 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: Time of Day Image Change

Posted 23 February 2011 - 07:33 PM

View PostLeeDJC, on 23 February 2011 - 09:34 AM, said:

Thanks for all the responses above. I managed to get my code to work thanks to you guys.

However, I have one question. I want to get the images to change at half past the hour instead of on the hour. How do I do this? I've tried with the following code, but it doesn't work :(

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/';
 
var ImgList = [
  ['closed.gif'],
  ["open.gif"]      // Note: no comma at end of list
];
 
function pixTimeChange() {
  var t=new Date();
       
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours(); 
  var m = t.getMinutes()
  var d = t.getDay();
   
  
	   
  var el=document.getElementById('myimage');
      el.src = ImgURL+ImgList[0]; 
      el.alt = ImgList[0];
  switch (d) {
       
    case 1 : // Mon
    case 2 : // Tue
    case 3 : // Wed
    case 4 : // Thu
		if ((h >= 16) && (m >=30) && (h < 22) && (m < 30)) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
        break;
	  
    case 5 : // Fri

... code continues ...



Your question is a bit vague.
Why does it not work? Is it the time logic or the display logic?

If the image display, you might try changing the ImgURL = 'images/' statement
to the actual full domain and path
or modify it to ImgURL = './images/' if it is a relative URL.

If the problem is the logic about the minutes, does the following:
    case 4 : // Thu
		if ((h >= 16) && (m >=30) && (h < 22) && (m < 30)) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
        break;
	  


mean you are trying to set the image when it is between 4:30pm and 9:30pm?

If that is the intent, then you need to split into two statements as "m" cannot be >= 30 and <30 at the same time as your logic implies.

Try:
if ((h >= 16) && (h < 22)) {  // between 4pm and 9pm
 // now check for more than or equal to 30 minutes past the hour
  if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
}



As always, the more information you can supply about your problem
the faster for you and the easier for us to make a recommendation as to what to modify.

Good Luck!
:whatsthat:
Was This Post Helpful? 0
  • +
  • -

#17 Guest_leedjc*


Reputation:

Re: Time of Day Image Change

Posted 25 February 2011 - 06:08 AM

Great, that seems to work OK :)

However, on a friday, we have two opening times. It shows the open.gif image between 11.30 and 1.30, but will show the closed image for the rest of the day. It does not show the open.gif image between 4.30 and 10.30. No doubt it's a very small error in the code which I've entered somewhere!

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/';
 
var ImgList = [
  ['closed.gif'],
  ["open.gif"]      // Note: no comma at end of list
];
 
function pixTimeChange() {
  var t=new Date();
       
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours(); 
  var m = t.getMinutes();
  var d = t.getDay();
   
  
	   
  var el=document.getElementById('myimage');
      el.src = ImgURL+ImgList[0]; 
      el.alt = ImgList[0];
  switch (d) {
       
    case 1 : // Mon
    case 2 : // Tue
    case 3 : // Wed
    case 4 : // Thu
		if ((h >= 16) && (h < 21)) {  
	 // now check for more than or equal to 30 minutes past the hour
		if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	}
        break;
				  
    case 5 : // Fri
		if ((h >= 11) && (h < 13)) {  
	 // now check for more than or equal to 30 minutes past the hour
		if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	}
		if ((h >= 16) && (h < 22)) {  
	 // now check for more than or equal to 30 minutes past the hour
		if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	}
		break;
	       
    case 6 : // Sat
		if ((h >= 16) && (h < 22)) {  
	 // now check for more than or equal to 30 minutes past the hour
		if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	}
        break;
             
    default ://>/ Sun
		if ((h >= 16) && (h < 21)) {  
	 // now check for more than or equal to 30 minutes past the hour
		if (m >= 30) { el.src = el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	}
		break;
	  }
	}
	 
	// Multiple onload function created by: Simon Willison
	// http://simonwillison.net/2004/May/26/addLoadEvent/
	function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) { oldonload(); }
	      func();
	    }
	  }
	}
	 
	addLoadEvent( function() { pixTimeChange(); } );




Was This Post Helpful? 0

#18 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: Time of Day Image Change

Posted 25 February 2011 - 11:00 AM

I'm not sure why the logic of el.src = el.src = ImgURL ... in the 'case' sections
You should remove one of the assignments, but I don't think that is the original problem

    case 5 : // Fri
        if ((h >= 11) && (h < 13)) { // between 11am and 12pm inclusive
     // now check for more than or equal to 30 minutes past the hour
        if (m >= 30) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
    }
        if ((h >= 16) && (h < 22)) { // between 4pm and 9pm inclusive
     // now check for more than or equal to 30 minutes past the hour
        if (m >= 30) { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
    }
        break;


If you time period is between 4:30 to 10:30, it will not show open after 9:30 due to your logic.
I don't know the time you tested, but if between 9:31 and 10:30, the display will be the closed gif image with your current code.
Was This Post Helpful? 0
  • +
  • -

#19 Guest_leedjc*


Reputation:

Re: Time of Day Image Change

Posted 25 February 2011 - 02:06 PM

Thanks JMRKER. I've removed one of the assignments, but that has made no difference. I have tested at the current time (9.06) and it still shows the closed.gif image.
Was This Post Helpful? 0

#20 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: Time of Day Image Change

Posted 25 February 2011 - 09:36 PM

OK, new attempt...
<html>
<head>
<title> Day of Week Time Display </title>
<script type="text/javascript">
// From: http://www.dreamincode.net/forums/topic/96698-time-of-day-image-change/page__pid__1263390__st__15&#entry1263390

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = '';
 
var ImgList = [
  'closed.gif', "open.gif"      // Note: no comma at end of list
];
 
function pixTimeChange() {
  var t=new Date();
       
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours();
  var m = t.getMinutes();
  var hm = h*60 + m;
  var d = t.getDay();
	var openFlag = 0;
  
  var el=document.getElementById('myimage');
  el.src = ImgURL+ImgList[0]; 
  el.alt = ImgList[0];
  switch (d) {
       
    case 1 : // Mon
    case 2 : // Tue
    case 3 : // Wed
    case 4 : // Thu
      if ((hm >= (16*60+30)) && (hm < (21*60+30))) { openFlag = 1; } // time between 4:30pm and 9:30pm
      break;
				  
    case 5 : // Fri
      if ((hm >= (11*60)) && (hm < (13*60+30))) {  openFlag = 1; }    // time between 11am and 1:30pm
      if ((hm >= (16*60+30)) && (hm < (21*60+30))) {  openFlag = 1; } // time between 4:30pm and 9:30pm
      break;
	       
    case 6 : // Sat
      if ((hm >= (16*60+30)) && (hm < (22*60+30))) {  openFlag = 1; } // time between 4:30pm and 10:30pm
      break;
             
    default ://>/ Sun
      if ((hm >= (16*60+30)) && (hm < (21*60+30))) {  openFlag = 1; } // time between 4:30pm and 9:30pm
      break;
  }
  el.src = ImgURL+ImgList[openFlag];  el.alt = ImgList[openFlag]; 

//    alert('Day:'+d+' \nHour:'+h+' \nMinute: '+m+'\n\nh*60: '+(h*60)+'\nhm: '+hm);  // for testing purposes only
	}
	 
	// Multiple onload function created by: Simon Willison
	// http://simonwillison.net/2004/May/26/addLoadEvent/
	function addLoadEvent(func) {
	  var oldonload = window.onload;
	  if (typeof window.onload != 'function') {
	    window.onload = func;
	  } else {
	    window.onload = function() {
	      if (oldonload) { oldonload(); }
	      func();
	    }
	  }
	}
	 
	addLoadEvent( function() { pixTimeChange(); } );

  </script>
  </head>
  <body>
  <img id="myimage" src="" alt="closed.gif">
  </body>
  </html>
 


Note changes to:
1. ImgList array definition
2. New variable 'hm'
3. Time comparisons using 'hm'
4. el.src assignments using 'openFlag' element position
5. Check your 'ImgURL' assignment (I changed it for testing purposes)

:bananaman:
Was This Post Helpful? 0
  • +
  • -

#21 DJZman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-April 12

Re: Time of Day Image Change

Posted 28 April 2012 - 01:01 AM

I see a prob with the code.

wail the code everyone is writing is right and works. But it uses the Computer's clock.

Since not everyone is on the same time zone people could get diffent resalts.


Sooooooooooo

If you time period is between 4:30 to 10:30, it will not show open after 9:30 due to your logic.
I don't know the time you tested, but if between 9:31 and 10:30, the display will be the closed gif image with your current code.


So if thats Eastern time zone lets say
and someone loads it at 9:30 Central time zone. it would show OPEN. Not Closed like the Eastern time zone would.

So there must be away to set a Time zone in the java so everyone is using the same clock.
Was This Post Helpful? 0
  • +
  • -

#22 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: Time of Day Image Change

Posted 28 April 2012 - 10:22 AM

If this is a major concern, then you could modify the last script
to use "UTC()" and "getTimezoneOffset()" and a number of
getUTC...() and setUTC...() functions.

See: http://www.w3schools...ef_obj_date.asp
Was This Post Helpful? 0
  • +
  • -

#23 DJZman  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-April 12

Re: Time of Day Image Change

Posted 28 April 2012 - 11:21 AM

View PostJMRKER, on 28 April 2012 - 10:22 AM, said:

If this is a major concern, then you could modify the last script
to use "UTC()" and "getTimezoneOffset()" and a number of
getUTC...() and setUTC...() functions.

See: http://www.w3schools...ef_obj_date.asp



I Personal would have no idea how to do something like that. I was looking for the code like the person who first posted looking for help for the code. and came across someone who posted how to do it day of the week in stead of hour's. and thats what brought me to this board. Great help i must say everyone gave him.

But adding to the scrip or changing it.. I would have no idea to do that, I have never worked with java before.

But thanks for the link.
Was This Post Helpful? 0
  • +
  • -

#24 wads24  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-August 12

Re: Time of Day Image Change

Posted 07 August 2012 - 05:15 PM

I have been looking for a script like this, but I wanted to make sure that I have modified it correctly to have it work for my business. I want a closed sign to show for MTN timezone outside the below hours, and an open sign during the below hours.
---------------------
Mon - Sat
11am - 9:45pm
---------------------
Sundays 12pm - 9:45pm
---------------------

Below is the modified code. Can you guys tell me if I modified it correctly?
<html>
<head>
<title></title>
<script type="text/javascript">
// For: http://www.dreamincode.net/forums/showtopic96698.htm

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/openhours/';

var ImgList = [
  ['closed_sign.png'],
  ["open_sign.png"]		// Note: no comma at end of list
];

function pixTimeChange() {
  var t=new Date();
	  
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var h = t.getHours();  
  var d = t.getDay();
  
   
  var el=document.getElementById('myimage');
	  el.src = ImgURL+ImgList[0];  
	  el.alt = ImgList[0];
  switch (d) {
	  
	case 1 : // Mon
	case 2 : // Tue
	case 3 : // Wed
	case 4 : // Thu
	case 5 : // Fri
	  if ((h >= 11) && (h < 2145))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	  if ((h >= 2145) && (h < 11)) { el.src = ImgURL+ImgList[2];  el.alt = ImgList[2]; }
	  break;
	  
	case 6 : // Sat
	  if ((h >= 11) && (h < 2145))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	  if ((h >= 2145) && (h < 11)) { el.src = ImgURL+ImgList[2];  el.alt = ImgList[2]; }
	  break;
	  
	default ://>/ Sun
	  if ((h >= 12) && (h < 2145))  { el.src = ImgURL+ImgList[1];  el.alt = ImgList[1]; }
	  if ((h >= 2145) && (h < 12)) { el.src = ImgURL+ImgList[2];  el.alt = ImgList[2]; }
	  break;
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) { oldonload(); }
	  func();
	}
  }
}

addLoadEvent( function() { pixTimeChange(); } );

</script>
</head>

<body>
<img src="" id="myimage" alt="time of day">
</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#25 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 129
  • View blog
  • Posts: 832
  • Joined: 25-October 08

Re: Time of Day Image Change

Posted 08 August 2012 - 06:49 AM

Should be simply a matter of changing the logic in the following function.
<html>
<head>
<title></title>
<script type="text/javascript">
// For: http://www.dreamincode.net/forums/showtopic96698.htm

var weekday = ['Sunday','Monday','Tuesday','Wednesday','Thrsday','Friday','Saturday'];
var ImgURL = 'images/openhours/';

var ImgList = [
  ['closed_sign.png'],
  ["open_sign.png"]		// Note: no comma at end of list
];

function pixTimeChange() {
  var t=new Date();
	  
// See the time below. Note: The time is in 24 hour format.
// In the example here, "7" = 7 AM; "17" =5PM.
  var m = t.getMinutes();
  var h = t.getHours();
  var now = h*60+m;  
  var d = t.getDay();
  
   
  var el=document.getElementById('myimage');
	  el.src = ImgURL+ImgList[0];  
	  el.alt = ImgList[0];
  switch (d) {
	  
	case 1 : // Mon
	case 2 : // Tue
	case 3 : // Wed
	case 4 : // Thu
	case 5 : // Fri
        case 6 : // Sat
          el.src = ImgURL+ImgList[0];  el.alt = ImgList[0];    // Closed
	  if ( (now >= (11*60)) && (now < (21*60+45)) )  {
            el.src = ImgURL+ImgList[1];  el.alt = ImgList[1];  // Open
          }
	  break;
	  
	default ://>/ Sun
          el.src = ImgURL+ImgList[0];  el.alt = ImgList[0];    // Closed
	  if ( (now >= (11*60)) && (now < (21*60+45)) )  {
            el.src = ImgURL+ImgList[1];  el.alt = ImgList[1];  // Open
          }
	  break;
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
	window.onload = func;
  } else {
	window.onload = function() {
	  if (oldonload) { oldonload(); }
	  func();
	}
  }
}

addLoadEvent( function() { pixTimeChange(); } );

</script>
</head>

<body>
<img src="" id="myimage" alt="time of day">
</body>
</html>


Note that military time may look like 2145, but it is actually
21 hours (60 minutes / hour) and and additional 45 minutes.
Therefore, your test value is NOT 2145, but (21*60)+45
That is the reason for the additional logic to create the 'now' variable

Not tested beyond EST and your baseURL is incomplete for me to see the images displayed. May work fine with your directory structure.
:bananaman:
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2