Image Change Based on Day/Time

Page 1 of 1

11 Replies - 1195 Views - Last Post: 10 May 2015 - 06:38 PM

#1 xcefkevin   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 26-February 12

Image Change Based on Day/Time

Posted 05 June 2014 - 02:49 PM

Hello Everyone, I got a lot of help from you guys last month and the project stalled a little bit and I'm back with a few more questions. I wasn't sure if I should push the old topic back to the top or start a new one so that's what I did. I'll start off with the code I have right now...


<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">

var logos = [
    	'/images/shows/Show1.png', 
    	'/images/shows/Show2.png',
	'/images/shows/Show3.png',
	'/images/shows/Show4.png',
	'/images/shows/Show5.png',
	'/images/shows/Show6.png',
	'/images/shows/Show7.png',
	'/images/shows/Show8.png'
]; 

onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();

	
  // 1am to 6am Show Monday through Friday
  if ( ((HH >= 1) && (HH < 6)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[0];
  } 
	}else 
	
  // 6am to 12pm Show Monday through Friday
  if ( ((HH >= 6) && (HH < 12)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[1];
  } 
	}else 
	
  // 12pm to 3pm Show Monday through Friday
  if ( ((HH >= 12) && (HH < 15)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[2];
  } 
	}else 

  // 3pm to 4pm Show Monday through Friday
  if ( ((HH >= 15) && (HH < 16)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[3];
  } 
	}else 

  // 4pm to 5pm Show Monday through Friday
  if ( ((HH >= 16) && (HH < 17)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[4];
  } 
	
  // 5pm to 8pm Show Monday through Friday
  if ( ((HH >= 17) && (HH < 20)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[5];
  } 
	}else 

  // 8pm to 9pm Show Monday through Friday
  if ( ((HH >= 20) && (HH < 21)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[6];
  } 
  	}else 

  // 9pm to 10pm Show Monday through Friday
  if ( ((HH >= 21) && (HH < 22)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[7];
  } 
	}else 

  // 10pm to 1am Show Monday through Friday and into Saturday
  if ( ((HH >= 22) && (HH < 1)) && ((DOW >= 1) && (DOW <= 6)) ) {
    document.getElementById('show').src = logos[8];
  } 
	}else 

}

</script>

</head>
<body>
<img id="show" src="" alt="">
</body>
</html>


So I had a few questions that I was hoping to get some help with.


1. You'll see the first part var logos = [ which I guess gathers all the images I'm going to use. Now this code is really just starting and I'm probably going to have another 10-12 images to open. So I'm wondering if there is a simpler way to open them all.

2. The next part is a question concerning assigning the images based on the if/else statement. Instead of using src = logos[0]; is it possible to do something like src = Show1.png so that way I know for sure that it's the image thats going to be used without any guess work or somehow screwing something else?

3. Finally the shows are going to be based on EST and I'm wondering how this code will work for someone in a different state, say California? Will I have issues or should it work smoothly? I'm using wordpress if that helps.


Thanks (P.S. If you see anything else in the code that might be a problem or having suggestions I'm always welcome to hearing them. Just go easy on me as I'm a noob with this stuff)

Kevin

Is This A Good Question/Topic? 0
  • +

Replies To: Image Change Based on Day/Time

#2 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Image Change Based on Day/Time

Posted 05 June 2014 - 03:41 PM

I see others looking at this topic, so I bet you get several sets of the same answers, but here's mine.

If the images all follow a pattern like that, then you could do a loop where you add the number to the end, e.g.:

var logos = [];
for (var i = 1; i <= 20; i++) {
  logos.push('/images/shows/Show' + i + '.png');
}


Quote

The next part is a question concerning assigning the images based on the if/else statement. Instead of using src = logos[0]; is it possible to do something like src = Show1.png so that way I know for sure that it's the image thats going to be used without any guess work or somehow screwing something else?

Not if you're using an array like that. The alternative would be to use an object:

var logos = {
  'show1': '/images/shows/Show1.png',
  'show2': '/images/shows/Show2.png',
  ...
}


Then you would access them like logos.show1, logos.show2, etc. You can build an object like that in a loop also.

Quote

Finally the shows are going to be based on EST and I'm wondering how this code will work for someone in a different state, say California? Will I have issues or should it work smoothly? I'm using wordpress if that helps.

In Javascript, since it runs on the user's browser, all date information is according to whatever the clock is set to on the user's computer. If they change their time settings and refresh the page, the page will change to match their new time settings. If you use PHP to get the date information then you can have it the same for everyone, since PHP runs on the server and not each user's computer.
Was This Post Helpful? 0
  • +
  • -

#3 xcefkevin   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 26-February 12

Re: Image Change Based on Day/Time

Posted 05 June 2014 - 04:32 PM

Ok, well the time zones probably isn't a huge deal right now. I can deal with that when the time comes. So as far as changing the code to fit your suggestions, would it look something like this?

<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
<script type="text/javascript">

var logos = {
  'show1': '/images/shows/Show1.png',
  'show2': '/images/shows/Show2.png',
}

onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();

	
  // 1am to 6am Show Monday through Friday
  if ( ((HH >= 1) && (HH < 6)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show1').src = logos;
  } 
	}else 
	
  // 6am to 12pm Show Monday through Friday
  if ( ((HH >= 6) && (HH < 12)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show2').src = logos;
  } 
	}else 


</script>

</head>
<body>
<img id="show" src="" alt="">
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 xcefkevin   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 17
  • Joined: 26-February 12

Re: Image Change Based on Day/Time

Posted 05 June 2014 - 05:03 PM

Also to be clear with what my goal is. I want to set up something like this:

http://wibx950.com/

Below the Listen Live where the radio host changes based on the time. I'd love for there to be a program out there that did the work for me but I'm assuming thats not the case which is why I'm trying to do it this way and the easiest way possible for someone with almost no javascript skills.
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is online

  • D.I.C Lover
  • member icon

Reputation: 2031
  • View blog
  • Posts: 6,202
  • Joined: 15-January 14

Re: Image Change Based on Day/Time

Posted 06 June 2014 - 09:05 AM

You wouldn't set the source to just logos, you would set it to a particular property, like logos.show1. Logos is an object, not a string.
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER   User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Image Change Based on Day/Time

Posted 06 June 2014 - 08:07 PM

My guess to the solution to your problem.

<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
</head>
<body>
<img id="personality" src="" alt="">

<script type="text/javascript">
// For: http://www.dreamincode.net/forums/topic/348197-image-change-based-on-daytime/

/*
var baseURL = '';
var logos = [
    	'/images/shows/Show1.png', 
    	'/images/shows/Show2.png',
	'/images/shows/Show3.png',
 	'/images/shows/Show4.png',
	'/images/shows/Show5.png',
	'/images/shows/Show6.png',
	'/images/shows/Show7.png',
	'/images/shows/Show8.png'
]; 
*/
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var logos = [
   '11.jpg',  // default image for "No shows on Sunday"
   '12.jpg',  // Hour range image for 11pm to 1am
   '13.jpg',  //   range for 1am to 6am
   '14.jpg',  //   range for 6am to 12pm
  ' 15.jpg',  //   range for 12pm to 3pm
   '21.jpg',  //   range for 3pm to 4pm
   '22.jpg',  //   range for 4pm to 5am
   '23.jpg',  //   range for 5pm to 6am
   '24.jpg',  //   range for 4pm to 5am
   '25.jpg',  //   range for 4pm to 5am
   '12.jpg'   //   range for 11pm to 1am
];

function HourRange(hh) {
  if (hh < 1)  { return 1; }  // to 1am
  if (hh < 6)  { return 2; }  // to 6am
  if (hh < 12) { return 3; }  // to noon
  if (hh < 15) { return 4; }  // to 3pm
  if (hh < 16) { return 5; }  // to 4pm
  if (hh < 17) { return 6; }  // to 5pm
  if (hh < 20) { return 7; }  // to 8pm
  if (hh < 21) { return 8; }  // to 9pm
  if (hh < 22) { return 9; }  // to 10pm
  if (hh > 21) { return 1; }  // to midnight
  return 0;  // should never get here // alert('Error in hour passed');
}
function personalityDisplay() {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  var pic = HourRange(HH);

  switch (DOW) {
    case 1: case 2: case 3: case 4: case 5: break; // Monday through Friday logic
    case 6: pic = 0;  break;                       // Saturday logic
    default: pic = 0;  break;                      // Sunday logic - No Shows (???)
  }
  document.getElementById('personality').src = baseURL + logos[pic];
  document.getElementById('personality').alt = baseURL + logos[pic];
}

onload = function () { personalityDisplay(); }

</script>
</body>
</html>




NOTE:
1. Alter 'baseURL' to match your domain and path

2. Use your filenames for the personality to display.
I used some goofy ones for testing.
I reserved a space for 'No personalities', like on a Sunday.

3. If hours change on the individual days,
rather than being the same for Mon-Fri, a bit more mods are needed.
Your original post did not go into enough complete detail.
Was This Post Helpful? 0
  • +
  • -

#7 dingodoo   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 5
  • Joined: 08-May 15

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 03:42 AM

View PostJMRKER, on 06 June 2014 - 08:07 PM, said:

My guess to the solution to your problem.

<!DOCTYPE HTML>
<html>
<head>
<title> Logo Script </title>
</head>
<body>
<img id="personality" src="" alt="">

<script type="text/javascript">
// For: http://www.dreamincode.net/forums/topic/348197-image-change-based-on-daytime/

/*
var baseURL = '';
var logos = [
    	'/images/shows/Show1.png', 
    	'/images/shows/Show2.png',
	'/images/shows/Show3.png',
 	'/images/shows/Show4.png',
	'/images/shows/Show5.png',
	'/images/shows/Show6.png',
	'/images/shows/Show7.png',
	'/images/shows/Show8.png'
]; 
*/
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var logos = [
   '11.jpg',  // default image for "No shows on Sunday"
   '12.jpg',  // Hour range image for 11pm to 1am
   '13.jpg',  //   range for 1am to 6am
   '14.jpg',  //   range for 6am to 12pm
  ' 15.jpg',  //   range for 12pm to 3pm
   '21.jpg',  //   range for 3pm to 4pm
   '22.jpg',  //   range for 4pm to 5am
   '23.jpg',  //   range for 5pm to 6am
   '24.jpg',  //   range for 4pm to 5am
   '25.jpg',  //   range for 4pm to 5am
   '12.jpg'   //   range for 11pm to 1am
];

function HourRange(hh) {
  if (hh < 1)  { return 1; }  // to 1am
  if (hh < 6)  { return 2; }  // to 6am
  if (hh < 12) { return 3; }  // to noon
  if (hh < 15) { return 4; }  // to 3pm
  if (hh < 16) { return 5; }  // to 4pm
  if (hh < 17) { return 6; }  // to 5pm
  if (hh < 20) { return 7; }  // to 8pm
  if (hh < 21) { return 8; }  // to 9pm
  if (hh < 22) { return 9; }  // to 10pm
  if (hh > 21) { return 1; }  // to midnight
  return 0;  // should never get here // alert('Error in hour passed');
}
function personalityDisplay() {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  var pic = HourRange(HH);

  switch (DOW) {
    case 1: case 2: case 3: case 4: case 5: break; // Monday through Friday logic
    case 6: pic = 0;  break;                       // Saturday logic
    default: pic = 0;  break;                      // Sunday logic - No Shows (???)
  }
  document.getElementById('personality').src = baseURL + logos[pic];
  document.getElementById('personality').alt = baseURL + logos[pic];
}

onload = function () { personalityDisplay(); }

</script>
</body>
</html>




NOTE:
1. Alter 'baseURL' to match your domain and path

2. Use your filenames for the personality to display.
I used some goofy ones for testing.
I reserved a space for 'No personalities', like on a Sunday.

3. If hours change on the individual days,
rather than being the same for Mon-Fri, a bit more mods are needed.
Your original post did not go into enough complete detail.



I am interested in this script but do you or anyone else have it so it displays different times/images 7 days a week, so each day is different.
Was This Post Helpful? 0
  • +
  • -

#8 vwphillips   User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 13
  • Joined: 07-November 14

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 06:31 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<base href="http://www.vicsjavascripts.org/StdImages/"  />
</head>

<body>
<img id="tst" src="0.gif" />

<script type="text/javascript">
/*<![CDATA[*/


 function zxcTmageTimer(o){
  var id=o.ImageID,a=o.ImageArray,img=document.getElementById(id),n=new Date(),a=a[n.getDay()],src,z0=1;
  if (img&&a){
   clearTimeout(o.to);
   src=a[0][0];
   for (;z0<a.length;z0++){
    if (n>=new Date(n.getFullYear(),n.getMonth(),n.getDate(),a[z0][1].split(':')[0],a[z0][1].split(':')[1])&&n<=new Date(n.getFullYear(),n.getMonth(),n.getDate(),a[z0][2].split(':')[0],a[z0][2].split(':')[1])){
     src=a[z0][0]
    }
   }
   img.src=src;
   o.to=setTimeout(function(){ zxcTmageTimer(o); },1000);
  }
 }


zxcTmageTimer({
 ImageID:'tst',
 ImageArray:[
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','14:23','15:28']],   //Sunday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','12:30','16:30']],   //Monday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','12:30','16:30']],   //Tuesday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','12:30','16:30']],   //Wednesday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','12:30','16:30']],   //Thursday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','12:30','16:30']],   //Friday
  [['0.gif'],['1`.gif','09:30','12:30'],['2.gif','14:16','16:30']]    //Saterday

 ]
})
/*]]>*/
</script>

</body>

</html>

Was This Post Helpful? 0
  • +
  • -

#9 JMRKER   User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 05:29 PM

View Postdingodoo, on 10 May 2015 - 03:42 AM, said:

I am interested in this script but do you or anyone else have it so it displays different times/images 7 days a week, so each day is different.


Perhaps the last posted entry solved your problems,
but if not then I would have more questions to modify my entry.

How many pictures total do you wish to display? 1 for each day (7) plus a "No show available" image?
How many hours to cover? 8, 12, 24 or something else? Same hours for each day?
Non-hourly times, for example 9:30am to 11:30am? Which images go with which day/time combination?

Lots of possibilities, but since I'm not much of a mind reader,
I'll wait for a response before putting in too much work.
Was This Post Helpful? 0
  • +
  • -

#10 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2542
  • View blog
  • Posts: 10,183
  • Joined: 03-December 12

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 05:56 PM

Let me point out that we are not a code writing service. Take what is posted to figure out what makes it work for your uses, not have someone revamp it because you don't want to learn how.
Was This Post Helpful? 0
  • +
  • -

#11 dingodoo   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 5
  • Joined: 08-May 15

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 06:06 PM

View PostJMRKER, on 10 May 2015 - 05:29 PM, said:

View Postdingodoo, on 10 May 2015 - 03:42 AM, said:

I am interested in this script but do you or anyone else have it so it displays different times/images 7 days a week, so each day is different.


Perhaps the last posted entry solved your problems,
but if not then I would have more questions to modify my entry.

How many pictures total do you wish to display? 1 for each day (7) plus a "No show available" image?
How many hours to cover? 8, 12, 24 or something else? Same hours for each day?
Non-hourly times, for example 9:30am to 11:30am? Which images go with which day/time combination?

Lots of possibilities, but since I'm not much of a mind reader,
I'll wait for a response before putting in too much work.


Times would be as follows
Monday-Thursday
0000-0600 - image a.jpg
0600-1000 - image b.jpg
1000-1400 - image c.jpg
1400-1500 - image d.jpg
1500-1800 - image e.jpg
1800-2200 - image f.jpg
2200-0000 - image g.jpg

Friday
0000-0600 - image a.jpg
0600-1000 - image b.jpg
1000-1400 - image c.jpg
1400-1500 - image d.jpg
1500-1800 - image e.jpg
1800-2200 - image f.jpg
2200-0000 - image h.jpg

Saturday
0000-0700 - image i.jpg
0700-1100 - image j.jpg
1100-1200 - image k.jpg
1200-1400 - image l.jpg
1400-1800 - image m.jpg
1800-2100 - image n.jpg
2100-0000 - image o.jpg

Sunday
0000-0700 - image p.jpg
0700-1000 - image q.jpg
1000-1100 - image r.jpg
1100-1300 - image s.jpg
1300-1600 - image t.jpg
1600-1900 - image u.jpg
1900-2200 - image v.jpg
2200-0000 - image w.jpg

no default/no show image required
mon-thur is same show except for fri that is different between 2200-0000
it would be good to have news image so for example
Monday
0600-0700 - image a.jpg
0700-0702 - image news.jpg
0702-1000 - image a.jpg
1000-1002 - image news.jpg
1002-1400 - image b.jpg
etc, etc
Was This Post Helpful? -1
  • +
  • -

#12 macosxnerd101   User is offline

  • Games, Graphs, and Auctions
  • member icon




Reputation: 12316
  • View blog
  • Posts: 45,416
  • Joined: 27-December 08

Re: Image Change Based on Day/Time

Posted 10 May 2015 - 06:38 PM

Please do not necro threads simply to ask us to do your work for you. We are a help forum, not a code writing service.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1