Kronos Kronos - 7 months ago 17
Javascript Question

Open and Closed image swap not changing at correct time

The basic premise of this is to have a section of code that changes a image based on a set schedule (in this case 9am to 5pm), sort of like an open and closed sign.

The code I have so far is:

<script type='text/javascript'>
$(window).load(function(){
// Translate your hours to UTC, example here is using Central Standard Time (-0500 UTC)
// Opening hour in UTC is 16, Closing hour is 0 the next day
var d = new Date(),
open = new Date(),
closed = new Date();
// Statically set UTC date for open
open.setUTCHours(16);
open.setUTCMinutes(0);
open.setUTCSeconds(0);
open.setUTCMilliseconds(0);
// Statically Set UTC date for closing
closed.setUTCDate(d.getUTCDate()+1); // UTC time rotates back to 0 so we add a day
closed.setUTCHours(0); // UTC hours is 0
closed.setUTCMinutes(0);
closed.setUTCSeconds(0);
closed.setUTCMilliseconds(0);
// Debugging
console.log("user's date:" + d);
console.log("store open time in user's timezone:" + open);
console.log("store close time in user's timezone:" + closed);
console.log(d > open); // user's time is greater than opening time
console.log(d < closed); // is user's time less than closing time (you don't have to go home...)

// Test for store open?
if (d > open && d < closed) {
setOpenStatus(true);
}
else {
setOpenStatus(false);
}

function setOpenStatus(isOpen) {
$('#open').toggle(isOpen);
$('#closed').toggle(!isOpen);
}
});//]]>

</script>


</head>

<body>
<div id="status">
<div id="open"><span title="OPEN"></span></div>
<div id="closed"><span title="CLOSED"></span></div>
</div>

</body>

</html>


How ever for some reason it is not changing at those times, I think it might have something to do with it not refreshing with the browser time but I'm not sure.

Thank you for any help you can give me!

Answer

In your HTML you need to add a symbols for open/close. I used the symbols + and - inside the span tag.

If you want to test the value each hour you have to use the javascript function setInterval and to stop this process you can use the function clearInterval.

// the intervalId
var nIntervId = null;

// the next variable is only for debug ...
var lastIsOpen = true;

function setOpenStatus(isOpen) {
  $('#open').toggle(isOpen);
  $('#closed').toggle(!isOpen);
}

// the function to stop the setInterval function
function stopCheckIfClosed() {
  if (nIntervId != null) {
    clearInterval(nIntervId);
    nIntervId = null;
  }
}

// your code:
// I added an optional parameter so that if you call this function
// without the parameter the value false is used, otherwise
// the value passed to the function is used
function checkIfClosed(isInDebugMode) {
  var d = new Date();
  var inDebugMode = isInDebugMode || false;

  if (inDebugMode) {
    if (lastIsOpen) {
      lastIsOpen = false;
      setOpenStatus(true);
    } else {
      lastIsOpen = true;
      setOpenStatus(false);
    }
    return;
  }

  // Test for store open?
  if (d.getHours() >= 9 && d.getHours() <= 17) {
    setOpenStatus(true);
  } else {
    setOpenStatus(false);
  }
}

$(function () {
  // on document ready call your function: with no arguments means no debug
  checkIfClosed(true);

  // start the interval looping function passing the value true to the function
  // checkIfClosed. Call this function each hour
  //nIntervId = window.setInterval(checkIfClosed, 60 * 60 * 1000, true);
  // for test pursposes I reduced the interval to 1 second
  nIntervId = window.setInterval(checkIfClosed, 1000, true);
});
#status div {
  font-family:helvetica,arial,sans-serif;
  font-size:20px;
  font-weight:bold;
}
#status span {
  display:inline-block;
  text-indent:-12000px;
}
#open,#closed{
  display:none;
}
#open span {
  background-image: url('http://i.imgur.com/KmGlJgN.png');
  width:640px;
  height:335px;
}
#closed span {
  background-image: url('http://i.imgur.com/YWLrDlm.png');
  width:1100px;
  height:850px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>


<div id="status">
    <div id="open"><span title="OPEN">+</span></div>
    <div id="closed"><span title="CLOSED">-</span></div>
</div>

Comments