12 Replies - 1822 Views - Last Post: 08 May 2014 - 10:59 AM

#1 xcefkevin   User is offline

  • New D.I.C Head

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

Change Image Based on Time and Day

Posted 08 May 2014 - 07:31 AM

Hello Everyone, I'm interested in learning how to have an image changed based on the Time of Day along with the Day itself. I did a little research and came across this which I'm using as my base for the code.

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

var logos = [
    'images/Image1.jpg', 
    'images/Image2.jpg'
]; 
onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 8) && (HH < 18)) && ((DOW >= 1) && (DOW <= 6)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
}
</script>

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


Its similar to what I'm looking for but a bit different because I'll be needing a lot more added to it. Basically I'm looking to learn how to do something that will fit this need:

Schedule (as an example)

8am - 12pm / Monday - Friday (Image 1)
12pm - 3pm / Monday - Friday (Image 2)
ect....
8am - 12pm / Saturday (Image 8)
12pm - 3pm / Saturday (Image 9)
ect...
8am - 12pm / Sunday (Image 12)
ect....

I'm thinking (hoping?)its just a matter of changing the If/Else Statements? Or something simple like that, but perhaps its more complicated than I imagine.

Thanks in advance for any help anyone can provide for me.

Is This A Good Question/Topic? 0
  • +

Replies To: Change Image Based on Time and Day

#2 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 07:35 AM

Try it out and experiment! Looking through the code it should come close to what you are looking for. Use something like firebug when you run into issues and report back what you have found.
Was This Post Helpful? 1
  • +
  • -

#3 TgaJava   User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 76
  • Joined: 28-April 14

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 07:45 AM

Are you saying coding it using a set of if-else statements is complicated? I think it would be just a lot of code but not that much complicated.

Up to my knowledge, I will do the same. So tell us what happened when you test/run the code. Then we all can troubleshoot it. :bigsmile:
Was This Post Helpful? 1
  • +
  • -

#4 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 07:53 AM

For the amount of possible choices, I would use a simple switch statement, use a few arrays to house everything.
Was This Post Helpful? 0
  • +
  • -

#5 xcefkevin   User is offline

  • New D.I.C Head

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 08:31 AM

Alright everyone so I did a little testing and my inexperience with javascript clearly showed lol

First thing that happened when I put the code on the site (its a wordpress site if that helps) was that the image did show up....however it showed up in the wrong spot and in place of where the actual site logo was.

I figured out how to correct that though by changing "logo" with "show" and that seemed to bring back the actual logo in the header and the image is showing up in the right spot! It also changes so that when its between 12-3pm it changes to one image and if its not it changes to something else (Half the battle I suppose?).

The problem is.....now I'm not sure how to do the rest of the code. Should I remove the "else" statement and keep doing ifs? How would I do that? I don't want people doing my work for me and I wouldn't expect you guys to. However maybe if someone could provide me with the first part for maybe 12-3, 3-5pm on Monday. I could figure out how to do all the other times?

Also when I set the day of the week I have it (I think) to be between Monday and Friday. How would I set it up for one day. Would it be: ((DOW >= 6) && (DOW <= 5)) ) for Saturday and ((DOW >= 0) && (DOW <= 0)) ) for Sunday?


Thanks again for everyone's help so far!!!

Updated code:

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

var logos = [
    '/images/shows/Show1.png', 
    '/images/shows/Show2.png'
]; 
onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 12) && (HH < 15)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[0];
  } else {
    document.getElementById('show').src = logos[1];
  }
}
</script>

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

Was This Post Helpful? 0
  • +
  • -

#6 TgaJava   User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 76
  • Joined: 28-April 14

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 08:50 AM

Quote

((DOW >= 0) && (DOW <= 0)) ) for Sunday?

this is the same as (DOW==0)
Was This Post Helpful? 1
  • +
  • -

#7 xcefkevin   User is offline

  • New D.I.C Head

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 09:04 AM

Ok so would I do something like this than with the code...

if ( ((HH >= 12) && (HH < 15)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[0];
  } 
if ( ((HH >= 15) && (HH < 17)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[2];
  } 

Over and over until I get all the shows for Monday through Friday and than down the code...

if ( ((HH >= 12) && (HH < 15)) && ((DOW == 6)) {
    document.getElementById('show').src = logos[3];
  } 



Or am i completely off? Also am I correct in guessing that: src = logos[0] the 0 represents the first image from var logos and that I would just do 2,3,4 ect.. down the line for each new image?
Was This Post Helpful? 0
  • +
  • -

#8 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 09:14 AM

Quote

Also am I correct in guessing that: src = logos[0] the 0 represents the first image from var logos and that I would just do 2,3,4 ect.. down the line for each new image?


Correct, just make sure that the files are in the current directory.
Was This Post Helpful? 1
  • +
  • -

#9 xcefkevin   User is offline

  • New D.I.C Head

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 09:20 AM

Great! Was I also correct about how I was setting up the If statements? Should I just be using If? Would I need to use "else" at all?

I know you had suggested switch and arrays but I'm not familiar at all on how to do that so I'm thinking I should just stick with something basic even if it takes longer to make for now.
Was This Post Helpful? 0
  • +
  • -

#10 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 10:00 AM

If statements are fine depending on how many. Switch statements are for evaluating a single expression over many values. Like dayOfWeek You could execute code dending on the specific day.
Was This Post Helpful? 1
  • +
  • -

#11 xcefkevin   User is offline

  • New D.I.C Head

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 10:02 AM

So I did some testing on my own and it looks like I figured it out. Here is the code I'm using for anyone who might need the same help I did in the future...

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

var logos = [
    	'/images/shows/Show1.png', 
    	'/images/shows/Show2.png',
	'/images/shows/Show2.png'
]; 

onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 12) && (HH < 15)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[0];
  } 
  if ( ((HH >= 15) && (HH < 17)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[1];
  } 
  if ( ((HH >= 17) && (HH < 20)) && ((DOW >= 1) && (DOW <= 5)) ) {
    document.getElementById('show').src = logos[2];
  } 

}
</script>

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



Can anyone see any flaws in this except for the fact its going to take me a while to get every single possible time down? I couldn't of done it without everyone's speedy feedback so against I'm very thankful.
Was This Post Helpful? 0
  • +
  • -

#12 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

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

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 10:33 AM

You could simplify it.

First search the hour. Then nest the day of week if.
Was This Post Helpful? 1
  • +
  • -

#13 Blindman67   User is offline

  • D.I.C Addict
  • member icon

Reputation: 139
  • View blog
  • Posts: 615
  • Joined: 15-March 14

Re: Change Image Based on Time and Day

Posted 08 May 2014 - 10:59 AM

You are doing alright but there are a few things that can simplify what you are doing.

First: They all are on the same DOW and are after 11am so there really is no need to do that test every time. Do it once and do the other tests inside that condition.
Second: Mainly because I am lazy (or is that time poor) I would get the image element with just one call. Save me typing it in three times.
Third: We know that if the test for one set of HH passes then we don't need to test the others so we add else statements.
Last: HH >= 12 is the same as HH > 11 We know that the hour is a whole number so save a character here.

So that would give us, and replacing lines 17 to 25.
// test the day is correct and its 12 or later
if(DOW > 0 && DOW < 6 && HH > 11){ 
    // Good chance that we need the image element so get it now.
    var showImg = document.getElementById('show'); 

    if(HH < 15){ // we know its after 12 so Is it before 15
        showImg.scr = logos[0]; // yes
    }else        // no
    if(HH < 17){ // It must be after 14. Is it before 17
        showImg.scr = logos[1]; // Yes
    }else        // no
    if(HH < 20){ // Its after 16 is it before 20
        showImg.scr = logos[2]; // yes
    }
}
// all done.


Hope that helps.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1