search

objectivehtml / FlipClock

http://flipclockjs.com/
MIT License
2.74k stars 954 forks source link

Countdown issue after zero? #148

Closed jesseleite closed 10 years ago

jesseleite commented 10 years ago

I had my FlipClock set to countdown to Oct. 4th at 9am. Everything was working fine until FlipClock hit zero... then this happened: http://resourcestage.ca/rs14/_conference-testCountdown.php I wanted it to stop at 00:00:00:00. Is this an issue with FlipClock, or an issue with my JS: http://hastebin.com/rupamureba.xml ?

objectivehtml commented 10 years ago

It's most likely all the changes I did in 0.7.x branch. I tested the hell out of everything, and all my examples work. Can you create a barebones example illustrating the error so I can take a look at the code? I should be able to find a fix relatively easily.

objectivehtml commented 10 years ago

Nm, I see your .xml file. I didn't realize that contained your JS code. I will take a look and see if I can find anything.

objectivehtml commented 10 years ago

This works fine for me. I know I could add some provisioning in the core lib for this, but I am not sure I want to just yet. I may at some point implement negative numbers for certain clock faces. This is currently the best way to solve this:

<html>
    <head>
        <link rel="stylesheet" href="../compiled/flipclock.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="../compiled/flipclock.js"></script>        
    </head>
    <body>
        <div class="clock" style="margin:2em;"></div>

        <script type="text/javascript">
            var clock;

            $(document).ready(function() {
                // Set dates.
                var futureDate  = new Date("October 4, 2014 9:00 AM EDT");
                var currentDate = new Date();

                // Calculate the difference in seconds between the future and current date
                var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;

                // Calculate day difference and apply class to .clock for extra digit styling.
                function dayDiff(first, second) {
                    return (second-first)/(1000*60*60*24);
                }

                if (dayDiff(currentDate, futureDate) < 100) {
                    $('.clock').addClass('twoDayDigits');
                } else {
                    $('.clock').addClass('threeDayDigits');
                }

                if(diff < 0) {
                    diff = 0;
                }

                // Instantiate a coutdown FlipClock
                clock = $('.clock').FlipClock(diff, {
                    clockFace: 'DailyCounter',
                    countdown: true
                });
            });
        </script>

    </body>
</html>
jesseleite commented 10 years ago

So you just added if(diff < 0) { diff = 0; }? That solves the problem for new page loads, but if someone were watching the countdown to zero live, it wouldn't have any effect unless the user refreshed the page after it zeros I assume.

objectivehtml commented 10 years ago

I just tested, it works fine when it hits 0. It just stops as it should. What I meant by including code in the core, was including a check to see if the user passes something less than 0. I may reconsider that though, I need to give it some though as to where in the code that logic actually belongs.

jesseleite commented 10 years ago

Hmm, testing again, it seems to be stopping at 1 second (00:00:00:01), rather than stopping at a perfect 0... which feels weird. I guess I was wrong, it only seems to go into negatives when I refresh page after it stops. With that extra if(diff < 0) { diff = 0; } code, now when I refresh it does not go into negative numbers, instead it stays at 0. Still weird that it's stopping at 1 second though.

Also, regarding 0 versus going into the negatives, I feel like most people would require their countdowns to stop at 0. I'm only assuming, but wouldn't it be less common for someone to want a countdown to go past 0? That said, if countdowns by default stopped at 0, and then you gave the option to countdown past 0, something like: countdownNegative: true?

objectivehtml commented 10 years ago

I don't get that effect at all during the countdown. Using the same code I posted, and just adjusting the date to be +1 minute in the future and letting the clock countdown it reaches 0 on my end. It stops perfectly at 0.

screen shot 2014-10-09 at 12 01 56 pm

jesseleite commented 10 years ago

Weird. Reaches 00:00:00:01 here :(

objectivehtml commented 10 years ago

What browser are you using? I am using the latest Chrome production build.

jesseleite commented 10 years ago

Latest releases of Safari, Chrome, and Firefox on OSX. http://puu.sh/c64xM/bb5da22e2e.png I have yet to check in Windows though. Maybe it has something to do with JS and my computer's clock? I don't know much about this stuff :P

objectivehtml commented 10 years ago

Is you use Chrome and open up the developer console, are you seeing any JS errors? I highly doubt it would be your machine's version of JS.

objectivehtml commented 10 years ago

I also meant to say, I am at a loss on this one. I will try to test this in Safari and Firefox to see if I can mimic the same error, but I am literally using the exact same code you sent me. I created a file called "test.html", pasted that code in, added the conditional and that's all I did. So I am really wondering why it could be different for me vs. you. Are you using the latest build of FlipClock (0.7.4)? https://github.com/objectivehtml/FlipClock/releases

jesseleite commented 10 years ago

Oh interesting. This happens when it hits 1 second: http://puu.sh/c653D/62da84a629.png

jesseleite commented 10 years ago

Ohhh, maybe I should upgrade, I'm on 0.4.0 - SORRY. I swear I checked this, maybe my eyes saw "4" and thought "it's good". I will update now.

objectivehtml commented 10 years ago

Lol, yeah. The library has been refactored at least twice since then. ;)

jesseleite commented 10 years ago

Maybe next time you can ask me questions like: "Is your computer plugged in?" or "Have you updated your software?" ...I feel so dumb, 0.7.4 works great! Sorry for wasting your time about the 00:00:00:01 thing!

Though I do still need if(diff < 0) {diff = 0;} for proper 00:00:00:00 display after countdown is over (for new page loads only). I feel that would be a welcome change in future version :)

Thanks again for your time, I appreciate it!

objectivehtml commented 10 years ago

No problem, glad you got it working.