2

Is there any reason why this solution won't work in SharePoint? It works well on jsfiddle. I modified the html file to add css and js reference and put the html in a cewp. What am i missing? any help will be appreciated.

https://jsfiddle.net/h353rdzx/2/

<head>
<link href="/SiteAssets/CountDown/CountDown.css" rel="stylesheet" type="text/css" />
<script src="/SiteAssets/CountDown/CountDown.js" type="text/javascript"></script>   
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv" class="js-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>

</body>
Improve this question
1
  • 1
    I'd start by making sure you use server relative urls and checking for 404s in the browser console (network)
    – Tiago Duarte
    Feb 20, 2017 at 16:29

2 Answers 2

Reset to default
0

The SharePoint UI loads in stages. Your code is likely executing before the elements are loaded in the DOM.

You should add your initializer to this client side (JS) array and it will be executed when the body is loaded:

_spBodyOnLoadFunctionNames

Hope this helps.

Improve this answer
0

You can save a whole lot of Script and HTML by using the SharePoint String.format function to format the counts

<div id='clock1'></div>
<script>
function countdown(id,endtime){
  var timer=setInterval(function () {
    var t = endtime - new Date();
    if (t>0) {
      var HTML='{0:D2} days {1:HH}:{1:mm}:{1:ss}';
      document.getElementById(id).innerHTML = String.format(HTML,~~(t/864e5),new Date(t));
    } else {
      clearInterval(timer);
    }
  }, 1000);
  return(timer);
};
var timer1=countdown('clock1' , new Date('2018'));//new year
</script>

Note

If you only want the number of days, SharePoint (sp.datetimutils.js) has a function available:

var daysremaining = GetDaysAfterToday(new Date(2017,11,31) );//New Years eve

sp.datetimeutils.js is loaded on Form en View pages, but in CSR it might not be available yet as the page is still loading

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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