Countdown Timer

[alfreema]

Does anybody know of an event countdown timer for vb5? If not, throw that on the list of missing mods for vb5! We have a pretty hoppin' college basketball forum and we have always had a countdown timer for the games and other key events, but I haven't found a mod for vb5 so far.

[alfreema]

Well I just found javascript for a countdown timer on w3schools and so I modified that slightly like:

<!-- Display the countdown timer in an element -->
<div id="countdownTimer" style="color:#f4d116">
    Wichita State Men's Basketball vs Henderson State (EXH.)
    <p id="demo"></p>
</div>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Nov 4, 2017 17:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script> 

And then I just edited my forum page using the Site Builder and added a Static HTML module and dumped that in it. Works great! Seems like it would be super easy to turn this into a mod where I could just add a title and date in the AdminCP? Also, it would be cool to get this to show up next to my logo on every page, instead of just on the Forum page. Is it tricky to get Static HTML up next to your logo on every page?

[glennrocksvb]

You could add the script in the Header Ad module. The timer will be placed above the logo but you could move it using CSS.

[alfreema]

Ah, I'm going to give that a go later!

[Ice]

Funnily enough, we just created a countdown timer for our forum using Java Script.

You can give this a go if you like. The purpose of this code was to show when 3 in-game events that were set to 6pm in each Time Zone would take place in your local Time Zone and the code would calculate how long until the event for you based on your system clock, it would show the time the event is taking place with a countdown timer in brackets next to each time.

3 Events:
6pm PST (America West Coast)
6pm GMT (UK)
6pm CST (China)

<span id="times"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js" integrity="sha256-DYyWoZ81AkDpPAJcZqoKFkhTnt5EV74MlgFi8yEr0lc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone.min.js" integrity="sha256-wnlfv2SMPXay8VywRkRiL5zysJhwn2Y0du7pg2fkoEY=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js" integrity="sha256-vBJSPpSAuUKYXDA+2hx2dQmyhkmM91vYjXI/o5QjnmA=" crossorigin="anonymous"></script>
<script>
function updateTime() {
var local = moment.tz.guess()
var pst= moment.tz("2017-11-16 18:00", "America/Los_Angeles").tz(local)
var gmt= moment.tz("2017-11-16 18:00", "Europe/London").tz(local)
var cst= moment.tz("2017-11-16 18:00", "Asia/Shanghai").tz(local)
html = "<span>" + cst.calendar() + " (" + cst.fromNow() + ")</span><br>"
html+="<span>" + gmt.calendar() + " (" + gmt.fromNow() + ")</span><br>"
html += "<span>" + pst.calendar() + " (" + pst.fromNow() + ")</span><br>"
document.querySelector("#times").innerHTML = html
}
setInterval(updateTime,60000)
updateTime()
</script>

Unfortunately, I can't show the result as you need to enable HTML in the post for the code to work, but if you're an admin that's not a problem. Feel free to test it in your test sub-forum or something.

You can tweak the code and remove the UK and China times, or you might want to change the UK and China code into CST and EST times. (the CST in the code above refers to China Standard Time).

We're continuing to work on this so I'll update you as we make changes.

[alfreema]

Ah, that's pretty cool. I really should learn how to create a "real" mod and this would be the an easy one to cut my teeth on. I wonder if there is a tutorial for how the plugin/hook system works for vb5?

One thought I had for this mod would be that it could somehow tie into the Event system. That way you could load up (say) 10 events and when one expires, the next one automatically starts counting down.

[glennrocksvb]

I wonder if there is a tutorial for how the plugin/hook system works for vb5?

I have a link on how to create a basic vB5 mod in the Useful Links module on homepage.

That way you could load up (say) 10 events and when one expires, the next one automatically starts counting down.

What if events overlap?

[alfreema]

I have a link on how to create a basic vB5 mod in the Useful Links module on homepage.

Sweet! I will definitely check that out!

What if events overlap?

Ah, well in my world events don't have duration. LOL So really I would just set it by _start_ of the event ... that's really what you are counting down to 99% of the time I think.