wimbarelds / timecircles Goto Github PK

Hi,

im trying to have only one circle for the complete time, is that possible ? Let's say i want a countdown for 90 minutes. I don't want to have it separated into 4 circles, but just one.

Is that somehow possible ?

As you may have seen in the other issues I've raised, my goal is to show only minutes until down to the last minute, and then switch to seconds. The problem I'm experiencing though is that it if I want to add an additional trigger at 90 seconds to do something, it's being missed.

It doesn't look like the .addListener method is called for anything that isn't set to show:true, and since at 90 seconds, the seconds circle is still set to show:false my listener is not being triggered.

I added $('input#timer').val(unit + ' ' + value + ' ' + total); within the listener so that I could watch in real time which values were being included with each callback, and they were stuck on Minutes 1 119 (for instance at the 2 min threshhold) for that entire minute, rather than moving back to seconds, allowing me to cath 90.

I believe it would be more logical to ALWAYS return seconds in the callback function, or at the very least allow me to provide a preference within the instantiation call to .TimeCirlces() for a fixed unit.

When you press on stop after the timer has been running, and then press start again it display the total time the timer has been running. It does not start where you originally pressed stop. The time in the background continue to count.

First of all, really nice work 👍 . I'm watching your code and i didn't see where you use the attribute "show" and it isn't work. I wish i could help you with the solution :(

tCircles.TimeCircles({ start: false,
time: {
Days: { show: false, text: "DIAS" ,
color: "#5eebd4"},
Hours: { show: true, text: "HORAS" ,
color: "#34bced"},
Minutes: { show: true, text: "MINUTOS",
color: "#3468ed" },
Seconds: { show: true, text: "SEGUNDOS",
color: "#f66235" }
}});

Hi there,

Is there an option to show the countdown timer with the total_duration but not start it? if i use start: false it won't appear until i call .timerCircles().start() . The reason why i'm asking you this is because i want to bring the timer in the page with a slide animation and start it after all other elements appeared (also with different animations). Thanks!

I have set the countdown to 15 seconds but when the countdown starts, the color that shows the remaining time starts at about 3 o'clock. I want the color to decrease starting at 12 o'clock until the countdown hits 0. I hope this makes sense.

Thanks, Jason

1. Does anyone know of any method to hide the Days, Hours, Minutes and Seconds after they hide zero ?

The use case is to replace the timer div with an "event reached"message after the seonds count is Zero.

Thanks.

Hi there,

Hope you can help me out with that: I am using the TimeCircles as a Countdown.

Now, when on the website and the counter reaches 00:00:00 - it starts counting up again (I think I am not using the newest version, will fix that later). Anyway - despite that behaviour, I want to trigger a jQuery event, namely Page Reload, when the counter reaches 0.

I tried working with the .end() event, but that seems not to work (or I implemented it wrongly):

$("#Countdown").TimeCircles().end(function(){
    window.location.reload(true)
});

From the documentation it refers to working with addEventListener() - but honestly I am not familiar with that.

So asking you here: can you help me out with this and pointing me into the right direction for how to achieve a page reload via jQuery as soon as my TimeCircles() reaches 00:00:00? Thank you very much :)

Hey great work with the js.

It is working fine and responsive. So...have to read a little bit the docu and then there are no problems to setting up....but one thing :-)

I have set up into my index.html this code for responsive working:

<script type="text/javascript">
    $(window).resize(_.throttle(function(){
    $("#DateCountdown").TimeCircles().rebuild()
        }));    
</script>

Normally i had the settings in this script for colors and so on. But that was not working anymore after I have setup the throttle function. So I have changed the colors in the js here

TC_Instance.prototype.default_options = {
    ref_date: new Date(),
    start: true,
    animation: "ticks",
    count_past_zero: true,
    circle_bg_color: "#f54f36",
    use_background: true,
    fg_width: 0.02,
    bg_width: 0.06,
    total_duration: "Auto",
    direction: "Clockwise",
    start_angle: 0,

    time: {
        Days: {
            show: true,
            text: "Days",
            color: "#f54f36"
        },
        Hours: {
            show: true,
            text: "Hours",
            color: "#f54f36"
        },
        Minutes: {
            show: true,
            text: "Minutes",
            color: "#f54f36"
        },
        Seconds: {
            show: true,
            text: "Seconds",
            color: "#f54f36"
        }
    }
};

Is there a way that I can get the color into a stylesheet to setup color styles?
How to do?
Thanks for your great work. I love it.

I've set the counter "total duration" to 5 seconds

When the number displayed reaches 0 the animation still shows the last part of the arc animating toward the zero point.

Should the animation finish animating at the exact same time as the number reaches 0.

Love TimeCircles so far...curious on text option within time...

I'm trying to change the text along with the color...color works...but the text doesn't change. Curious on what I might be doing wrong or will it simply not work this way?

Basically my goal is to change add more time once it gets to 0...if I use reload() it works but I lose my $span variable within the addListener if that makes sense.

$target.TimeCircles().addListener(function(unit, value, total) {

    var minutes = Math.floor(total / 60);
    var seconds = total % 60;
    if (seconds < 10) { 
        seconds = "0" + seconds;
    }
    $span.text(minutes + ":" + seconds);
    if (total <= 0) {
        $("#CountDownTimer").data('timer', 60);
        $target.TimeCircles({ time: { Seconds: { color: "#99CCFF", "text": "Switch" } }, "total_duration": 60  });      
        $target.TimeCircles().restart(); 
    }

});

on ie8 in timecircles.js line line 352 , there's "indexOf" that's not recognised as known on issue documented on some articles online as
http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8

which provides also a quick fix.

should be nice to have a workaround for canvas on IE8 maybe using 'explorercanvas'

kudos

Awesome plugin!

However, while it works fine with Chrome, Firefox, and IE9, it does not work with IE8 and gives an error “Object doesn't support this property or method” and prevents the plugin from running properly.

While I realize GitHub does not support IE8 and below, is there a workaround or fix for this so users with IE8 can benefit from this plugin?

Thanks for your help.

Waldo Buck
www.CoolZips.com

Thank you, good code. but animation smooth mode seems to have performance issue.

When I hide a timer, i.e. the "Day" timer like this, the next time instance following (i.e. "Hour") shows the correct time value, but the circle itself is not being filled up correctly (looks like it's stuck at 0 or 1):

<div id="Countdown" data-date="2014-02-11 12:00:00"></div>
<!-- (Remark: "data-date" is always within 24 hour range for the countdown) -->

<script type="text/javascript" src="js/TimeCircles.js"></script>
<script>
    $('#Countdown').TimeCircles({
        start: true,
        refresh_interval: 1,
        time: {
            Days: { show: false },
            Hours: { show: true },
            Minutes: { show: true },
            Seconds: { show: true }
            }
    });
</script>

I fixed it with a dirty workaround inside the "TimeCircles.js" at line 30 for my implementation, by changing the value of "Days:" from Years --> Days:

[...]
    var nextUnits = {
        Seconds: "Minutes",
        Minutes: "Hours",
        Hours: "Days",
        Days: "Days"
    };
[...]

Did I do something wrong in the implementation or is this an official bug?

Hello. Thanks for this great plugin.
I am trying to change the data-timer value with Javascript or by changing the value of an input. So making it a variable. Can you please advice me how to change the value of the data-timer this way?
Thanks!

Sweet count down/up plugin! Thank you for sharing.

I have read the closed issues, checkouted docs and demo but cannot seem to find way to forward to URL once counter is at zero.

Lets say someone arrives at page and counter is setting at zero. How (or is even possible) can I forward said visitor to a URL of my choice?

Once they arrive on page, say 10 seconds later they are forwarded to http://google.com

Anyway to do this?

Thanks again for the script, appreciated much.

Hello,

The help you have provided over has been very helpful for me so far. I have a question regarding showing a single unit of time. I currently have only minutes showing. But when the timer goes below 60, I want the minutes circle to be replaced by the seconds circle. I tried using:

 addListener(function(unit, value, total) {
 if (total < 60) {
 $(this).TimeCircles({ time: { "Minutes": { text: "Hello", "show": false, color: "Red" }, Seconds: { "show": true, color: "Green" } } });

 } else if.........

In this case the minutes do turn red, but they are not hidden, and Seconds do not appear in its place. I do not want to touch the total_duration, only to replace the counter in the middle of the circle once the final 60 seconds are reached. Please let me know if you have any suggestions. Thank you.

Hi.
Whan i try to make a stopwatch that countdown and press "Stop" the clock stops, but when i then click "Start" then it reset the time, thats wrong.

And can see that the demo inhere is doing the same, how do i fix this so i can stop the time and start it again, without the time is restart ?

Hi

Currently the animation always travels in an ant-clockwise direction.

Would it be possible to change the direction via a setting so that it travels in either anti/clockwise direction?

Cheers

Hi,

I've got a project on which I need to display minutes and seconds in XX:XX format, both counting down and counting up, depending on the event type.

Is this possible?

Thanks for your help.

Hi, I just download the awesome plugin from jquery plugin website. it is really a very convenient and powerful tool.
I have one concern so far, consider I had set the countdown time to 150 seconds (it gonna be like 2 minutes and 30 seconds to be countdown). However, every time I refresh the page, the countdown clock go back to where it is originally (start countdown from 2 mins and 30 seconds).
Is there a way to solve this problem, i'm currently working on an events countdown project.
Thanks so much!
Jim

Awesome plugin but does not work when the page is loaded via ajax and also in parent container which css display is set to none and later triggered to show such as tab panel. e.g

The parent page contains an iframe and the timer container div, and the child page called within the iframe is where the timer is actually being instantiated.

On the first page load, the timer appears normally and as expected, however on subsequent refreshes of the iframe page, rather than replacing the existing TC instance on the timer container, the old timer stops and a new timer is stacked under it and begins counting, leaving the old on visible. The expected behaviour would be that the old is removed and the new is displayed.

Apparently the child is not seeing the data attribute TC sets on the parent docs container element that the previous instance set, after the child is refreshed.

Here is some example code to reproduce...

index.html =

<h1>TIMER CIRCLE</h1>
<div id="idle_timer" style="width:300px; height:150px; border:1px solid #666; margin:50px;"></div>
<input id="timer-count" value="15" />
<iframe src="timer.html" style="width:300px; height:150px; border:1px solid #666; margin:50px;"></iframe>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="./TimeCircles.css">
<script type="text/javascript" src="./TimeCircles.js"></script>

timer.html =

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="TimeCircles.css">
<script type="text/javascript" src="TimeCircles.js"></script>
<script>
$( document ).ready(function() {
    var idle_timer = $('div#idle_timer',window.parent.document);
    idle_timer.data('timer',15);
    idle_timer.TimeCircles({ time: { Days: { show:false }, Hours: { show:false }, Minutes: { color: '#4D8DC1' }, Seconds: { color: '#4D8DC1' } } });
</script>

LOADED!

Hi,
for solve the problem in Safari NaN in Date.parse, on line 308 add:

if(isNaN(this.data.attributes.ref_date)){
var newDate = attr_data_date.replace(/-/g, '/');
newDate = newDate.replace("T"," ");
this.data.attributes.ref_date = Date.parse(newDate);
}

I executed the following code but instead of counting up, it is counting down. The current system datetime 2014-01-09 11:45:49. i'm trying to count up from 2014-01-09 09:51:49

        setTimeout(function () {
            $('.deadline_tick').each(function () {
                $(this).show(1000, function () {
                    $(this).TimeCircles();
                });
            });
        }, 500);

Its counting down to 2hrs. After changing time to 00:00:00. it works and counts up. Why? I expected differently.

Hi, it looks as nice plugin but it looks that doesn't work "callbacking" it means: I need to call myFunction which reinitialize count down timer after count down timer ends. So I have:

jQuery(".example").end().myFunction();

var myFunction = function() {
alert("timer elapsed"); //this don't show
//reinitialization..
}

Do you know how to solve that use case?

Hi.

Is it possible to use custom fonts for the number display, could this work just by setting a font in the CSS?

Could the animated circle be anything other than a solid bar, segments, or mini circles or some other shape/pattern?

Cheers

While TimeCircles draws to fill 100% of its container when the page loads, if you resize the page and the container changes dimensions, TimeCircles remains at it's original dimensions and does not redraw itself.

Is there a way to update TimeCircles on screen resize?

I tried

$(window).resize(TimeCircles);

but that didn't do anything. Sorry to inundate you with questions :) Your help is greatly appreciated.

is it possible to show a 90 second timer? showing only seconds and counting down from 90.

Thanks

Hi, tested in IE8 and blow, all is not working, even the countdown numbers and words inside the circles. Is there a method to solve this?

THanks.

There is a bug.
If you set a past date, with animation ticks option, it adds a day, an hour, a minute, and a second, more.
anyway great work
thanks
Meg

Hi,

Lovely plugin, but I have 2 problems if you can offer any help.

I've set "count_past_zero" to false but it causes errors:

Line 273:
uncaught reference error: time is not defined

When I set days, hours, and minutes to false, the second counter no longer shows the foreground color.

Im using Win7 and i've tested on Chrome, IE11 and Firefox

$("#CountDownTimer").TimeCircles({
start: true, // determines whether or not TimeCircles should start immediately.
refresh_interval: 0.1, // determines how frequently TimeCircles is updated.
count_past_zero: false, // This option is only really useful for when counting down. What it does is either give you the option to stop the timer, or start counting up after you've hit the predefined date (or your stopwatch hits zero).
circle_bg_color: "#60686F", // determines the color of the background circle.
use_background: true, // sets whether any background circle should be drawn at all.
fg_width: 0.1, // sets the width of the foreground circle.
bg_width: 1.2, // sets the width of the backgroundground circle.
time: { // a group of options that allows you to control the options of each time unit independently.
Days: {
show: false,
text: "Days",
color: "#FC6"
},
Hours: {
show: false,
text: "Hours",
color: "#9CF"
},
Minutes: {
show: false,
text: "Minutes",
color: "#BFB"
},
Seconds: {
show: true,
text: "Seconds",
color: "#BFB"
}
}
});

Hi there, here I come back again (shamed).
I was trying to remove the 1(days) of the 4 time circles, so in the end will be only hours, minutes, seconds. I did successfully remove the display of "days" by using

But more issues come out, my current site wanna it like a countdown timer, so when I have a 2 days countdown, my "time circle" will hide the extra days, how can I add the extra days (which is most time 24 hours ) to hours circles?
I hope I explained myself clear.
Thanks so much for help.

How can I change time when timer is running?
Couldn't find any sample.

Hi,

Your script works great, only when using the default android browser only the number of remaining days is visible. The rest are only showing the text and not the reaming time values and circles. Any idea how to fix this? The android version is 4.1.1

Hi,

Is there a way to set the total_duration programatically? Even better would be the option to allow it to be the same as the data-timer value.

I am building a single page app which has multiple countdown timers, each one having a different value, this feature would be extremely useful.

Cheers for your continued support and great work.

Great plugin and it nearly does what I need, but I don't quite follow how I'm supposed to attached the addEventListener(callback). I don't know what event I'm listening for since i'm waiting on TimeCircles object to finish.

For instance, I have an application where the user will start the timer, but I need to know when the timer is done to post a record or when x amount of time is left to play a sound.

I'm assuming I'd need to use this to "reset" the timer automatically after the time has expired.

Thanks.

When adding a listener that is triggered by the 'total' value, and the timer is set as a count down, the 'total' value doesn't go negative after reaching zero, it seems to just turn around and start counting up.

The effect is that if I set a count down timer for 10 seconds for instance, and then want to trigger something at 5 seconds before the end and a different thing at 5 seconds after reaching 0 (-5 seconds) I cant.

Hi, I was thinking if I can disable the countdown round circles somehow and only left the countdown number.
Cause I was having responsive issues, was trying to display countdown numbers only when browsing in smaller size screen.

Very nice plugin, how is it possible to change time in running timer(eg. add seconds) ?

How would you go about displaying a different message in the middle of the circle when the timer reaches zero?

My current datetime is 2014-01-12 04:33:39. My date time to start counting up from is 2014-01-12 04:16:39 which is less about 0days 0 hours 17mins 2secs but the result output is 0 days 12 hours 17mins 2 secs. Something is definitely wrong with the hours section. It should be 0 hours. please check this out. It should be a little fix. I implemented the last COMMIT you made which fixed my last issue. But this came up

When the page loads and it sits idle for any length of time, when pressing "start" the timer already has the amount of time it was sitting there. For example, if load the page, wait 30 seconds before clicking the "start" button the timer will have 30 seconds shown.

If I click "stop". The timer does stop, but clicking "start" causes it the timer to act as though I hadn't stopped it. For example, if the timer says 30 seconds, I click "stop", wait 30 seconds, click "start", timer now reads 1 minute.

<div class="container">
    <div id="PageOpenTimer" style="width: 500px; height: 125px; float: left"></div>
    <button class="btn btn-success start">Start</button> <button class="btn btn-success stop">Stop</button>
</div>
<script>
    $("#PageOpenTimer").TimeCircles({start: false});
    $(".stop").click(function(){
        $("#PageOpenTimer").TimeCircles().stop();
    });
    $(".start").click(function(){ 
        $("#PageOpenTimer").TimeCircles().start();
    }); 
</script>

I'm not entirely sure how to access the TimeCircles() properties after it's been instantiated. We instantiate like so:

$('#idle_timer').attr('data-timer',1800);
$('#idle_timer').TimeCircles({ time: {
Days: { show:false },
Hours: { show:false },
Minutes: { color: '#4D8DC1' },
Seconds: { color: '#4D8DC1' } } })
.addListener(function(unit,value,total) { if (total == 1200) { } else if (total == 1500) { alert('Your session will expire in 5 minutes, you should save your work and / or reload the page.'); } } );

In the test for "total == 1200", how could I access the minutes / seconds colour attributes so for instance both could be changed to red? $(this) doesn't seem to be available.

Would it be possible to include a sweep gradient on the remaining time when counting down? I'm trying to illustrate urgency so I'd like the sweep to go from green to yellow to orange to red the closer it gets to the time running out.

Thanks.

The demo page (http://git.wimbarelds.nl/TimeCircles/index.html) doesn't appear to work in Safari. Is this supported?

Can you add bower support?

Array.prototype can have methods added to it and you end up iterating through those methods as well. Use forEach or plain old for (var i = 0; i < arr.length; ++i)