Change image depending on time

Question

I'm currently building a website for a shop which has the following opening times:

Tuesday & Wednesday: 10.00 - 17.00
Thursday: 10.00 - 12.30

Other days (else) is closed.

I've got an image for open (images/open.png & images/open@2x.png) and one for closed (images/closed.png & images/closed@2x.png).

I want to display those images as a background image (CSS) in a class (.open-closed) which has the following styles:

.open-closed {
    width: 48%; 
    background-color: #b3b3b3;
    display: inline-block;
    margin-top: 3%;
    border: 5px solid white;
    min-height: 300px;
    float: left;
}

Yes, it's not very correct since the width is better in pixels since there is an image in it, but I will fine-tune this as soon as the script is done.

I don't know much about jQuery/Javascript, almost nothing. But I googled some pieces together and edited some parts. What am I doing wrong?

   <script language="JavaScript">

    day=new Date()     //..get the date

    x=day.getHours()    //..get the hour


    if(x>=10 && x<17) {

       document.write('<style type="text/css">.open-closed{background-image:       url(images/open.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (x>=17 && x<24) {

       document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=tuesday && x>=10 && x<12.30) {

   document.write('<style type="text/css">.open-closed{background: url(images/open.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=monday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=friday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=saturday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    } else

    if (day=sunday) {

   document.write('<style type="text/css">.open-closed{background: url(images/closed.png); background-repeat:no-repeat; width:300px; height: 285px; background-size: 300px 285px;}</style>')

    }

   </script>

It's probably a very stupid mistake...

There's a pretty detailed post on CSS Tricks explaining how a banner image is changed depening on the time and weather, maybe it will be useful: http://css-tricks.com/live-weather-display-using-css-jquery-and-php/ — Graham Clark, Oct 26 '12 at 09:02
Don't do the switch with ``document.write``, make two classes ``.open`` and ``.closed`` with the corresponding urls to your images, and use the ``$("#your-div-or-body").appendClass("open")`` to attach the class to your div or body or wherever the img is displayed. And I'm not sure if new Date() returns strings with "friday"... Except that, ``friday`` is declared as a variable and you don't have that ;) — 23tux, Oct 26 '12 at 09:05

AntonNiklasson · Answer 1 · 2012-10-26T09:12:01.990

2

I would say your comparing the days wrong.

if(day.getDay() == 1) {
  // Now it's monday
}

That's the way to do it I would say.

Also: Try to avoid adding new style tags. Define CSS-classes and decide which one to apply. Say you have two classes: .open and .closed. In those classes each background image is defined. So all you need to do is decide which one to use.

edited Oct 26 '12 at 09:12

answered Oct 26 '12 at 09:06

AntonNiklasson

1,719
1
15
28

score 0 · Answer 2 · edited May 23 '17 at 12:12

A much simpler solution would be to define all the different types of images you want in different classes. A unique class for each different type of date.

Then all you would have to do is detect the date/time and change the class attribute accordingly. I would say that this is a better way than actually writing additional <style> tags to the document. Just prepare all of them ahead of time and decide which one you want to use.

score 0 · Answer 3 · answered Oct 26 '12 at 09:08

0

Please check operators you have used for date that is wrong

 if (day=monday)-- this must be problem

 if (day==monday)

writing css class dynamically not good thing create two classes then dynamically assign them.

answered Oct 26 '12 at 09:08

sunleo

10,589
35
116
196

score 0 · Answer 4 · edited May 23 '17 at 10:25

Why not use an object literal to store your data like so:

times = {
    "1": {
        "name": "Monday",
        "open": 10,
        "close": 17
    },
   "2": {
        "name": "Tuesday",
        "open": 10,
        "close": 17
    },
    // more days here
   "6": {
        "name": "Sunday",
        "open": 0,
        "close": 0 // assign same hour if not open at all
    }
}

With the following css

.open {
    background: url(images/open.png);
}
.closed {
    background: url(images/closed.png); 
}

Then you can do the following

var day = new Date();
var d   = day.getDay();
var x   = day.getHours();

if( x >= times[ d ].open && x < times[ d ].close ) {

    $("#open-closed").addClass("open");
    $("#open-closed").removeClass("close");

} else {

    $("#open-closed").addClass("close");
    $("#open-closed").removeClass("open");

}

The methods to add the class depend on you having jQuery but if you want to do it in just JavaScript try the following Change an element's class with JavaScript.

For days when the shop does not open add the same hour to both open and close times as I have done in my example.

Thank you all very much for your quick responds! One question to you, Bruno. How do you handle the days the shop is closed? And do I need to include the last part of the script (jQuery, I guess) in the same — Bob Wassermann, Oct 26 '12 at 14:22

score 0 · Answer 5 · answered Oct 26 '12 at 09:16

To actually set the image, this would be more appropriate; adding a class for open and closed depending on the day, as below:

if(day.getDay() == 1) {
  $("#divname").addClass("closed");
}
else if(day.getDay() == 2) {
  $("#divname").addClass("open");
}

Then your css:

.open{background: url(images/open.png); }
.closed{background: url(images/closed.png); }

score 0 · Answer 6 · answered Oct 26 '12 at 09:19

The best would be to have two classes, .open and .closed and set one of them through code.

ex:

CSS:

.open{
  background: url(images/open.png)
}

.closed{
  background: url(images/closed.png)
}

.open, .closed{
  ...
}

JS:

function updateOpenClosed(){
  var now = new Date();
  var day = now.getDay();
  var hour = now.getHour()+now.getMinute()/60;
  var banner = document.getElementById("open-closed")

  switch(day){
    case 2:
    case 3:
      if(hour>=10 && hour<17){
        banner.class="open";
      }else{
        banner.class="closed";
      }
      break;
    case 4:
      if(hour>=10 && hour<12.5){
        banner.class="open";
      }else{
        banner.class="closed";
      }
      break;
    default:
      banner.class="closed";
  }
}

Change image depending on time

6 Answers6