-2

I have below code and I want to convert this code so that it starts counting upwards after the event date. Can I please request an assistance?

$("#countdown").countdown("2016/02/22", function(event) {
var $this = $(this).html(event.strftime(''
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col">   <span class="countdown-time"> %-D </span> Days </div></div> '
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));});

My book says to use something like the below, but I am unable to accomplish the results :(

$('div#clock').countdown(finalDate, {elapse: true})
.on('update.countdown', function(event) {
if (event.elapsed) { // Either true or false
  // Counting up...
} else {
  // Countdown...
}  });

The first code counts days to an event. What I want to accomplish is that after the event, the counter starts counting upwards. i.e., Apple launches it iphone on 23rd Marc 16, the countdown timer shows 1 days left, however, after 23rd march, the countdown time starts counting upwards like 1day since launch and so forth

toriningen
  • 7,196
  • 3
  • 46
  • 68
Mike
  • 129
  • 1
  • 2
  • 14
  • Welcome to StackOverflow! What is this countdown function and what result are you trying to accomplish? Try making a [jsfiddle](https://jsfiddle.net/) with your code so it’s easier for us to help. – Vincent Orback Mar 22 '16 at 01:59
  • The first code counts days to an event. What I want to accomplish is that after the event the counter starts counting upwards. i.e., Apple launches it iphone on 23rd Marc 16, the countdown timer shows 1 days left, however, after 23rd march, the countdown time starts counting upwards like 1day since launch and so forth – Mike Mar 22 '16 at 02:23
  • @Pranay Did this answer your question? Did you need other help? – Julia Nething Mar 22 '16 at 14:23

1 Answers1

0

Ok here's a working example. I found a working example here: jQuery Countdown Count-Up Example and then modified it to fit your code. Both are included in the code below so you can see how they both work. Please note: I couldn't get it to work with a date that has already passed. I think the countdown has to physically pass before it will count up. As in, I don't think you can give it a date from ten years ago and have it automatically sync; I think that it needs to start from counting down, then get down to zero, before it will start counting up (at least, I couldn't get it to work, perhaps you can).

Also in case you're having issues with downloading Countdown: you need to bower install countdown and then change the src file below accordingly. Your bower components folder might not be in the same place as mine :)

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="../bower_components/jquery.countdown/dist/jquery.countdown.js"></script>
</head>
<body>
  <!-- Example from the site will go here: -->
  <div id="clock" style="height: 150px; width: 150px; background-color: blue"></div>
  <!-- Your example will go here: -->
  <div id="countdown" style="height: 150px; width: 150px; background-color: red"></div>
  <script type="text/javascript">
    // The example from the site:
    var fiveSeconds = new Date().getTime() + 5000;
    $('#clock').countdown(fiveSeconds, {elapse: true})
      .on('update.countdown', function(event) {

        var $this = $(this);
        if (event.elapsed) {
          $this.html(event.strftime('After end: <span>%H:%M:%S</span>'));
        } else {
          $this.html(event.strftime('To end: <span>%H:%M:%S</span>'));
        }
     });

    // Your example:
    $("#countdown").countdown("2016/12/22", function(event) {
        if (event.elapsed) {
          $(this).html(event.strftime(''
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> '
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));
        } else {
          $(this).html(event.strftime(''
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> '
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));
      }});
  </script>
</body>
</html>
Julia Nething
  • 232
  • 1
  • 3
  • 13