How to make responsive?

[Fatbat]

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.

[wimbarelds]

You can call a rebuild, so:

$(window).resize(function(){
    $("#timer").TimeCircles().rebuild();
});

[Fatbat]

That was quick!

That works, but it doesn't always size accurately. I tried adding it to a smartresize function and it seems to be working a bit better, but the fonts don't seem to want to scale with the circle.

[wimbarelds]

If it doesn't always size accurately, that sounds like a bug (A friend reported something similar). I'll have a look at this.

[yuhao-nyc]

please let us know, if the responsive thing works! thanks

[wimbarelds]

Can you show me an example of it not working as it should? I have a test set up here:

http://git.wimbarelds.nl/TimeCircles/test/

Where it seems to work perfectly.

[yuhao-nyc]

I did add the extra javascript line and the circles are responsively perfect, but there is a minor issue, when I resize webpage manually, the circles are flickering (or kind of twinkling). It may not a big deal, but its a little bit annoying.

[wimbarelds]

Ahh, if it's only the TimeCircles flickering- that's because the resize call is executed very very often! So it's resizing the TimeCircles possibly a hundred times in a second. That's going to cause some rendering issues/flickering.

What you should ideally do is use something to either throttle the function call.

If you're not opposed to adding a javascript library, then I can really recommend "underscore js" (http://underscorejs.org/)

Add the following:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

And change the javascript to:

$(window).resize(_.throttle(function(){
    tc.rebuild();
}, 500));

[yuhao-nyc]

will try that later, but i doubt that we gonna let me add new js libraries.

thanks for help, i really appreciate.

[wimbarelds]

It's possible to create such a function yourself, just google for javascript throttle script. Underscore is simply a (pretty great) library that has that functionality out of the box.

[yuhao-nyc]

javascript throttle script it is! Thanks

[wimbarelds]

Since there has been no further comments or questions, I assume this has been resolved now. If not, feel free to post further questions / reopen.

[kingRayhan]

how can I make it responsive with css media quary?

I want to show 4 circle in large screen and 2 circle in medium screen and one circle in small screen.

[MrHazimAli]

when resize, there is error inside console and timecircles did not responsive.. any help ?
error :

code:

tq