Change image based on time of day and day of week

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 6933 Views - Last Post: 21 March 2014 - 05:54 AM

#1 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Change image based on time of day and day of week

Posted 27 February 2013 - 12:34 PM

Hi, 1st time on this forum. I have a piece of code that changes and Open sign image to a closed sign on my webpage based on day of the week and time. My issue is I need different hours on Wednesdays but cannot figure out how to get the code right to do this. Sign is on homepage at http://www.aledopcworks.com my code is below and the issue is the DOW3. This works great for mon-fri but Wed not so much! Any insight would be greatly appreciated.

<script type="text/javascript">
var logos = [
	'http://BLAH BLAH BLAH/Graphics/open.png',  // Open image
	'http://BLAH BLAH BLAH/Graphics/Closed.png',  // Closed image
	'http://BLAH BLAH BLAH/Graphics/Closed.png'   // holidays image
]; 
var holidays = ['1/1','7/4','11/28','12/24','12/25'];

onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 1) && (DOW < 6)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
  if ( ((HH >= 9) && (HH < 13)) && ((DOW = 3)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }

  var tmp;
  for (var i=0; i<holidays.length; i++) {
	tmp = new Date(holidays[i]+'/'+now.getFullYear());
//	alert(tmp.toDateString()+'\n'+now.toDateString());  // for testing
	if (tmp.toDateString() == now.toDateString()) {
      document.getElementById('logo').src = logos[2];
    }
  }
}
</script>



Is This A Good Question/Topic? 0
  • +

Replies To: Change image based on time of day and day of week

#2 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 12:40 PM

After some checking and cache clearing this code does work..sorry
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,471
  • Joined: 12-December 12

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 12:45 PM

I'm surprised if it works unaltered as DOW = 3 is an assignment, whereas I assume you want to make a comparison, which would be DOW == 3.

You'll probably find that tomorrow it still thinks it is Wednesday :)

This post has been edited by andrewsw: 27 February 2013 - 12:45 PM

Was This Post Helpful? 1
  • +
  • -

#4 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 12:58 PM

well I do not claim to know what the heck I am doing lol. So would your recommendation be to just change that on line 13 from
if ( ((HH >= 9) && (HH < 13)) && ((DOW = 3)) ) {
to
if ( ((HH >= 9) && (HH < 13)) && ((DOW == 3)) ) {

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,471
  • Joined: 12-December 12

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 01:11 PM

Yes, although you might wait til tomorrow, so that you see the problem. It would be a bit sad if it was always Wednesday.. we would never get to the weekend :notify:
Was This Post Helpful? 1
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

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

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 02:20 PM

Another bit to consider:

Does your open/close times take into account that not all visitors will be using your same time zone? If that is critical to your design, it will need to be taken into consideration.
Was This Post Helpful? 1
  • +
  • -

#7 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 02:54 PM

View Postandrewsw, on 27 February 2013 - 01:11 PM, said:

Yes, although you might wait til tomorrow, so that you see the problem. It would be a bit sad if it was always Wednesday.. we would never get to the weekend :notify:/>

LOL..Right?

View PostJMRKER, on 27 February 2013 - 02:20 PM, said:

Another bit to consider:

Does your open/close times take into account that not all visitors will be using your same time zone? If that is critical to your design, it will need to be taken into consideration.

Not an issue this is a small shop in a small town. Anyone that would be using my services will definitely be in my time zone, but Thanks for all the Advice it is truly appreciated.
Was This Post Helpful? 0
  • +
  • -

#8 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 410
  • View blog
  • Posts: 1,449
  • Joined: 14-September 12

Re: Change image based on time of day and day of week

Posted 27 February 2013 - 08:30 PM

Well, one small suggestion to you on the website...try to avoid the blinking effect...it seems to cause some kind of strain to the eyes...

regards,
Raghav
Was This Post Helpful? 1
  • +
  • -

#9 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 10:40 AM

View Postraghav.naganathan, on 27 February 2013 - 08:30 PM, said:

Well, one small suggestion to you on the website...try to avoid the blinking effect...it seems to cause some kind of strain to the eyes...

regards,
Raghav

Blinking??

Ahh Wait I have found some code on the page in the autostyle section that had a blink text decoration...not sure how it got there I did have a piece of text awhile back to draw attention to and it must have generated some autostyle BS in there...but it should be gone now, Thank You :)
Was This Post Helpful? 0
  • +
  • -

#10 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:00 PM

To follow up on this fellas I had to make more changes to the code. To day the Closed sign was on when I checked my site at around 12:30p which is all together wrong.so the revamp is this below. I think having each DOW will correct this but not sure what are your thoughts?
var logos = [
	'http://www.aledopcworks.com/Graphics/open.png',  // Open image
	'http://www.aledopcworks.com/Graphics/Closed.png',  // Closed image
	'http://www.aledopcworks.com/Graphics/Closed.png'   // holidays image
]; 
var holidays = ['1/1','7/4','11/28','12/24','12/25'];

onload = function () {
  var now = new Date();
  var DOW = now.getDay();
  var HH = now.getHours();
  if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 1)) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
    if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 2)) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }

  if ( ((HH >= 9) && (HH < 13)) && ((DOW == 3)) ) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
  if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 4)) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
  if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 5)) {
    document.getElementById('logo').src = logos[0];
  } else {
    document.getElementById('logo').src = logos[1];
  }
  if ( ((HH >= 9) && (HH < 18)) && ((DOW == 6)) {
    document.getElementById('logo').src = logos[1];
  } else {
    document.getElementById('logo').src = logos[1];
  }
  if ( ((HH >= 9) && (HH < 18)) && ((DOW >= 7)) {
    document.getElementById('logo').src = logos[1];
  } else {
    document.getElementById('logo').src = logos[1];
  }

  var tmp;
  for (var i=0; i<holidays.length; i++) {
	tmp = new Date(holidays[i]+'/'+now.getFullYear());
//	alert(tmp.toDateString()+'\n'+now.toDateString());  // for testing
	if (tmp.toDateString() == now.toDateString()) {
      document.getElementById('logo').src = logos[2];
    }
  }
}
</script>


Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,471
  • Joined: 12-December 12

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:27 PM

This is overly elaborate. In particular, you are checking the same condition ((HH >= 9) && (HH < 13)) more than once. You only need to check it once and store the result.

Also your if..else statements will run one after another. So, even if the logo is changed in an earlier statement, it may be changed by a later statement.

var areOpen = ((HH >= 9) && (HH < 13));    // will store true or false

then something like:
if (areOpen) {
    // check DOW, I would possibly use a switch statement
} else {
    // we ain't open
}

If you are going to check if it is a holiday I would do this first: there is no point checking the hours or DOW if it is a holiday.

One of your tests checks against 13, whereas all the others are against 18. Is this correct?

This post has been edited by andrewsw: 28 February 2013 - 01:25 PM

Was This Post Helpful? 0
  • +
  • -

#12 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:29 PM

Yes, I just need the open sign on from 9-6 M,T,TH,FRI. 9-1 on Wed and closed Sat & Sun
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,471
  • Joined: 12-December 12

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:31 PM

I would also store the path separately, as it is the same path each time, and I assume will remain so:

var imgPath ='http://www.aledopcworks.com/Graphics/';

var logos = [
    'open.png',  // Open image
    'Closed.png',  // Closed image
    'Closed.png'   // holidays image
];
// then later..
document.getElementById('logo').src = imgPath + logos[1];

Was This Post Helpful? 1
  • +
  • -

#14 andrewsw  Icon User is online

  • blow up my boots
  • member icon

Reputation: 6541
  • View blog
  • Posts: 26,471
  • Joined: 12-December 12

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:41 PM

I would probably do it in this order:

Is it a holiday? If so, insert image and return from function
Is it Sat or Sun? If so, insert image and return from function
Is it Wed
   is it between 9 and 1; insert image and return
   else, closed image and return

Now we are left with Mon, Tue, Thu, Fri:
is it between 9 and 6?
    If so, insert image and return from function
else
    insert closed image.


Notice that, towards the end, it is no longer necessary to check the day, as it must be one of Mon, Tue, Thu, Fri.

This post has been edited by andrewsw: 28 February 2013 - 01:40 PM

Was This Post Helpful? 1
  • +
  • -

#15 b0mbardo  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 27-February 13

Re: Change image based on time of day and day of week

Posted 28 February 2013 - 01:53 PM

View Postandrewsw, on 28 February 2013 - 01:31 PM, said:

I would also store the path separately, as it is the same path each time, and I assume will remain so:

var imgPath ='http://www.aledopcworks.com/Graphics/';

var logos = [
    'open.png',  // Open image
    'Closed.png',  // Closed image
    'Closed.png'   // holidays image
];
// then later..
document.getElementById('logo').src = imgPath + logos[1];

Ok I understand where your coming from on this part and yes path remains the same, it makes sense to me what you wrote about "is" and "if so" unfortunately I do not comprehend javascript well enough to translate this into workable code so while I most certainly appreciate your expertise I may just have to remove it all together. I know I cannot expect to get the code laid out for me as this is not what this forum is for (say's so right in the rules...I did read them...lol)but as cool I think this is on my website, my ignorance of coding is getting the best of me.....give me a virus and I can track it down and obliterate it or have me build a system from scratch and we are talking my language....coding not so much!
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2