2

I am adding a countdown timer to a single CMS page that is counting down to September 20th, 2015.

I put all the javascript functions in js/countdownClock.js

function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'September 20 2015 08:59:59 UTC+0800';
initializeClock('clockdiv', deadline);

Then I called the file in the CMS page under the Layout Update XML sections:

<reference name="head">
  <action method="addItem">
    <type>js</type><script>countdownClock.js</script>
  </action>
</reference>

In the Content section of the page I put in:

<div id="clockdiv">
<div><span class="days">.</span>
<div class="smalltext">Days</div>
</div>
<div><span class="hours">.</span>
<div class="smalltext">Hours</div>
</div>
<div><span class="minutes">.</span>
<div class="smalltext">Minutes</div>
</div>
<div><span class="seconds">.</span>
<div class="smalltext">Seconds</div>
</div>
</div>

When I load the page however, only the labels Days, Hours, Minutes, Seconds displays. The javascript is supposed to calculate the time remaining and output the information in the content of the page with the span tags.

Does anyone know where I'm going wrong? Is the page even calling the javascript correctly?

6
  • Using your browser's developer tools, do you see the JS file being loaded on that specific page? Also, do you see any errors, especially JS errors in the Console? – Adi Sep 17 '15 at 17:31
  • I do see "Failed to load resource" messages in the Console – Melissa Byram Sep 17 '15 at 18:08
  • Is js/countdownClock.js one of those resources? If it is, you should see a message indicating why the resource was blocked. – Adi Sep 17 '15 at 23:11
  • clear both browser cache and server cache – Rajeev K Tomy Sep 18 '15 at 2:06
  • use your function inside document ready. – MeenakshiSundaram R Sep 18 '15 at 7:02
1

Because you're loading your javascript in the HEAD it's downloading the file and executing the code before the content exists on the page. A simple solution can be found below which would execute your function once the page content was ready to be executed against.

Update the final line of countdownClock.js like so:

jQuery(document).ready(function(){
    initializeClock('clockdiv', deadline);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.