Countdown html/css/js not working but works in jsfiddle

Question

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>

I'd start by making sure you use server relative urls and checking for 404s in the browser console (network) — Tiago Duarte
– Tiago Duarte, Commented Feb 20, 2017 at 16:29

Glenn Ferrie · Accepted Answer · 2017-02-22 12:59:25Z

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.

answered Feb 22, 2017 at 12:59

Glenn Ferrie

2335 silver badges17 bronze badges

Add a comment |

Robert Lindgren · Accepted Answer · 2017-02-22 13:10:53Z

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

Stack Exchange Network

Countdown html/css/js not working but works in jsfiddle

2 Answers 2

Note

Hot Network Questions

Countdown html/css/js not working but works in jsfiddle

2 Answers 2

Note

Related

Hot Network Questions