Announcement

Collapse
No announcement yet.

Countdown Timer

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Countdown Timer

    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.

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

    PHP Code:
    <!-- 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 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?

    Comment


      #3
      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.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


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

        Comment


          #5
          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)

          Code:
          <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.

          Comment


            #6
            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.

            Comment


              #7
              Originally posted by alfreema View Post
              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.

              Originally posted by alfreema View Post
              That way you could load up (say) 10 events and when one expires, the next one automatically starts counting down.
              What if events overlap?
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Originally posted by glennrocksvb View Post
                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!

                Originally posted by glennrocksvb View Post
                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.

                Comment

                Users Viewing This Page

                Collapse

                There is 1 user viewing this forum topic.

                • Guest Guest

                Latest Posts

                Collapse

                Working...
                X
                Searching...Please wait.
                An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                Please push the back button and reload the previous window.'
                An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                Please push the back button and reload the previous window.'
                An internal error has occurred and the module cannot be displayed.
                There are no results that meet this criteria.
                Search Result for "|||"