some concerns

[wimbarelds]

some concerns

[wimbarelds]

Javascript by it self doesn't remember variables by itself. What you could do is add a listener and saving the current value into a cookie. Then check if there's a cookie with some time remaining before you start the new timer. Mind you, this is not a bug or issue from time circles. It's not a supported or planned feature.

The solution I proposed would look something like:

        <div id="countdown"></div>
        <script type="text/javascript">
            $(function() {
                var countdown = null;
                var c = document.cookie.split(";");
                for (var i in c) {
                    if (c[i].indexOf("countdown=") === 0) {
                        countdown = parseInt(c[i].substr(10));
                        break;
                    }
                }
                if (countdown === null) {
                    countdown = 150;
                }
                $("#countdown").attr("data-timer", countdown);
                $("#countdown").TimeCircles().addListener(function(unit, value, total) {
                    if (unit === "Seconds") {
                        if (total > 0) {
                            document.cookie = "countdown=" + total;

                        }
                        else {
                            document.cookie = "countdown=0; expires=Fri, 27 Jul 2001 02:47:11 UTC;";
                        }
                    }
                });
            });
        </script>

[yuhao-nyc]

I totally understand that.
It's very nice of you to help me! I am trying your suggestion. Again, thanks a lot.

[yuhao-nyc]

Hi, Wim, I did try to integrate the code you sent me to my TC code. Nothing seems worked, I did changed the ID along with the one you sent me in here. It would be great if you can give me some heads up, I'm really new to hardcode javascript. My code is posted as following:

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

Counting Down Timer

          <script>
        $("#countdown").TimeCircles({count_past_zero: false}); 
        $("#countdown").TimeCircles({ time: { Days: { show: true }, Hours: { show: true } }});
        $("#PageOpenTimer").TimeCircles();


        //CSS customizations
        $("#countdown").TimeCircles({
                "bg_width": 0.9,
                "fg_width": 0.04666666666666667,
                "circle_bg_color": "#60686F",
                "time": {
                    "Days": {
                        "text": "Days",
                        "color": "#FFCC66"
                    },
                    "Hours": {
                        "text": "Hours",
                        "color": "#99CCFF"
                    },
                    "Minutes": {
                        "text": "Minutes",
                        "color": "#BBFFBB"
                    },
                    "Seconds": {
                        "text": "Seconds",
                        "color": "#FF9999"
                    }
                }

});
</script>

       <script type="text/javascript">
        $(function() {
            var countdown = null; //create a variable which is null
            var c = document.cookie.split(";"); //Split document.cookie on semicolons into an array called c
            for (var i in c) {
                if (c[i].indexOf("countdown=") === 0) {
                    countdown = parseInt(c[i].substr(10));
                    break;  //if not found, break
                }
            }
            if (countdown === null) {
                countdown = 150;
            }
            $("#countdown").attr("data-timer", countdown);
            $("#countdown").TimeCircles().addListener(function(unit, value, total) {
                if (unit === "Seconds") {
                    if (total > 0) {
                        document.cookie = "countdown=" + total;

                    }
                    else {
                        document.cookie = "countdown=0; expires=Fri, 27 Jul 2014 02:47:11 UTC;";
                    }
                }
            });
        });
    </script>
</body>

[wimbarelds]

It's because you're starting it before the code is executed, also you should really unify the settings:

Try this:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/TimeCircles.js"></script>
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  
        <link rel="stylesheet" href="css/TimeCircles.css" />
    </head>
    <body>
        <div class="container">       
            <h2>Counting Down Timer</h2>
            <div id="countdown" data-timer="100000" style="width: 700px; height: 250px;"></div>  
        </div>  
        <script type="text/javascript">
            $(function() {
                var countdown = null; //create a variable which is null
                var c = document.cookie.split(";"); //Split document.cookie on semicolons into an array called c
                for (var i in c) {
                    if (c[i].indexOf("countdown=") === 0) {
                        countdown = parseInt(c[i].substr(10));
                        break;  //if not found, break
                    }
                }
                if (countdown === null) {
                    countdown = 150;
                }
                $("#countdown").attr("data-timer", countdown);
                $("#countdown").TimeCircles({
                    count_past_zero: false,
                    "bg_width": 0.9,
                    "fg_width": 0.04666666666666667,
                    "circle_bg_color": "#60686F",
                }).addListener(function(unit, value, total) {
                    if (unit === "Seconds") {
                        if (total > 0) {
                            document.cookie = "countdown=" + total;
                        }
                        else {
                            document.cookie = "countdown=0; expires=Fri, 27 Jul 2014 02:47:11 UTC;";
                        }
                    }
                });
            });
        </script>
    </body>
</html>

[wimbarelds]

I'm going to assume this has solved the problem, if not simply place a comment and I can re-open it.

[yuhao-nyc]

Hi, Wim, It did work perfectly, that's awesome! Thanks.
I just went through the suggestions u provide earlier. However it seems I can only set the count-down date from " if (countdown === null) {
countdown = 1000000;
}"
Also I noticed I have to clean the cookies eveyrtime if I want to set up a new countdown date. Can I do that in code?

[wimbarelds]

Change the number of seconds it counts down from by changing the countDownFrom variable.

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="inc/TimeCircles.js"></script>
        <link rel="stylesheet" href="inc/TimeCircles.css" />
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">  
    </head>
    <body>
        <div class="container">       
            <h2>Counting Down Timer</h2>
            <div id="countdown" style="width: 700px; height: 250px;"></div>
            <button id="restart" class="btn btn-default">Restart</button>
        </div>  
        <script type="text/javascript">
            $(function() {
                var countDownFrom = 10;

                $("#countdown").TimeCircles({
                    count_past_zero: false,
                    "bg_width": 0.9,
                    "fg_width": 0.04666666666666667,
                    "circle_bg_color": "#60686F",
                })
                .addListener(function(unit, value, total) {
                    if (unit === "Seconds") {
                        if (total > 0) {
                            document.cookie = "countdown=" + total;
                        }
                        else {
                            console.log("Here");
                            document.cookie = "countdown=" + countDownFrom;
                        }
                    }
                });

                window.startTimer = function() {
                    var countdown = null; //create a variable which is null
                    var c = document.cookie.split(";"); //Split document.cookie on semicolons into an array called c
                    for (var i in c) {
                        if (c[i].indexOf("countdown=") === 0) {
                            countdown = parseInt(c[i].substr(10));
                            break;
                        }
                    }
                    if (countdown === null || countdown < 1 || countdown > countDownFrom) {
                        countdown = countDownFrom;
                    }
                    $("#countdown").attr("data-timer", countdown);
                    $("#countdown").TimeCircles().rebuild().restart();
                };

                window.restartTimer = function() {
                    $("#countdown").attr("data-timer", countDownFrom);
                    $("#countdown").TimeCircles().rebuild().restart();
                };

                window.startTimer();

                $("#restart").click(window.restartTimer);
            });
        </script>
    </body>
</html>

[yuhao-nyc]

Problem solved. thank you, have a great day.
Jim