1

Has anyone managed to incorporate Keith Wood's countdown javascript into a list view?

http://keith-wood.name/countdown.html

I have found the following link, which looks extremely promising, but alas, all the links are broken, and there is a reference to "row.cells" which does not appear in any of the code.

http://sharepoint.alanchai.com/2012/05/sharepoint-2010-countdown-timer-for.html

Thanks!

1

Here is some other code that gets you started:

function remaining(Y, M, D, h, m, s) {
    var t = new Date(Y, M, D, h, m, s) - new Date(),
        timers = [t / (36e5 * 24), (t / 36e5) % 24, (t / 6e4) % 60, (t / 1e3) % 60];
    return t > 0 ? timers.map(function (T) {
        return String.format('{0:D2}', ~~T);
    }).join(':') : false;
}
var countdown = setInterval(function () {
    var HTML = remaining(2015, 11, 31, 0, 0, 0);
    if (HTML) {
        document.getElementById('pageTitle').innerHTML = HTML;
    } else {
        clearInterval(countdown);
    }
}, 1000);

Remember:

  • If you add multiple timers you need extra bookkeeping, countdown now is one global.
  • Javascripts months start at 0 for january
  • The usefull String.format() is not native JavaScript but prototyped by SharePoint But hardly anyone knows you can do:

    String.format("Number:{0:N3} - Currency:{0:C2} - Percentage:{1:P1} - Digits:{2:D3}",21.21,0.34,19)
    

    Output

    "Number:21.210 - Currency:¤21.21 - Percentage:34.0 % - Digits:019"
    

If you need more fancy HTML formatting:

function remaining(Y, M, D, h, m, s, labels) {
    var tens, digits, t = new Date(Y, M || 0, D || 1, h || 0, m || 0, s || 0) - new Date(),
        span = '<span style=font-weight:bold;background-color:black;color:whitesmoke;margin:1px;>',
        segment = '<div style=float:left;margin-right:5px><span style=text-align:center;font-size:30%>{3}</span><div>{0}{1:D1}</span>{0}{2:D1}</span></div></div>',
        timers = [t / (36e5 * 24), (t / 36e5) % 24, (t / 6e4) % 60, (t / 1e3) % 60];
    return t > 0 ? timers.map(function (T, n) {
        tens = ~~(T / 10), digits = ~~T - (tens * 10);
        return String.format(segment, span, tens, digits, labels[n]);
    }).join('') : false;
}
var countdown = setInterval(function () {
    var HTML = remaining(2015, 11, 31, 0, 0, 0, ['days', 'hours', 'minutes', 'seconds']);
    if (HTML) {
        document.getElementById('pageTitle').innerHTML = HTML;
    } else {
        clearInterval(countdown);
    }
}, 1000);

Update #1

I mentioned the SharePoint String.format function, you can ofcourse use it as well to built a days:HH:MM:SS notation without any loops

t = new Date(2015,11,31) - new Date();
String.format( "{0:D2}:{1:HH:mm:ss}" , ~~(t/864e5) , new Date(t) )
  • Hi Danny, Update #1 is a gem. Still working through this. One thing I still need to find out is how to refresh the page to update the local values, without connecting back with the server... still thinking about this... – southskies Oct 6 '15 at 2:06
  • What do you mean with Local values? – Danny '365CSI' Engelman Oct 6 '15 at 15:57
  • What I was thinking was to have some kind of setinterval that would purely change the value of t internally within the page, rather than refreshing all the data back from the server again – southskies Oct 6 '15 at 23:08
  • The setinterval type functionality seems to do this. I'll keep working on this and post the results in the next day or so. – southskies Oct 7 '15 at 7:14
  • Yes, setInterval (I used it in the example) fires a function every X milliseconds – Danny '365CSI' Engelman Oct 7 '15 at 8:34
0

Perhaps not the answer ppl want, but I did not progress with this. If people do follow it up, the solution would have involved keeping tabs on the time for each of the list rows and counting down as per the approaches put forward by Danny. Beware that the Update #1 was a good idea, but needed some work as getting the vanilla times / dates needed time conversions as they used UTC times.

What I ended up with was creating a newsticker, and then incorporating the time remaining in this.

See this link

news ticker tape on sharepoint list SP 2013

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.