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...

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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); }

Answer 6

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";
  }
}