Stack the circles vertically?

[Davidlab]

Is there a way to stack the circles vertically rather than horizontal?

[wimbarelds]

Hi,

As of right now the only way to do that would be to have 4 of them vertically (which clearly is not ideal). In the semi-long term, I want to rewrite TimeCircles to be more modular, which would make this much easier to do. For now though...

If you really want it vertical, I could write some modifications that would allow you to place it vertically.

[Davidlab]

That would be great if you could. I am doing a project at this time and it would be nice if I could have it vertically or at least 2 by 2. Meaning 2 rows of circles...either on row for days and hours and the row below it would be minutes and seconds. However, all in one vertical row will work also. Let me know your thoughts and time frame. Thanks.

[Davidlab]

Do you have an update on this? Were you able to put something together? Thanks

[wimbarelds]

Hey, could you try this out: http://git.wimbarelds.nl/TimeCircles/test/inc/TimeCircles.js

I have a demo running here: http://git.wimbarelds.nl/TimeCircles/test/

[Davidlab]

Thanks that works and I also took some time to make it responsive. So it goes into vertical mode for mobile and horizontal for desktop. However, do you think there is a way to make it 2 by 2? vertical mode does not look right at a certain screen width within mobile where 2 by 2 would fill the screen better without being overpowering in terms of circle size. Let me know your thoughts? Thanks.

[wimbarelds]

I'm sorry, I don't currently have the time available to make this adaptation. For what it's worth: You could simply take 2 instances of TimeCircles and put them below each other. Something like:

<div class="timer" data-date="2016-01-01 00:00:00" data-options='{"time": { "Minutes": { "show": false }, "Seconds": { "show": false }}}' style="width: 400px;"></div>
<div class="timer" data-date="2016-01-01 00:00:00" data-options='{"time": { "Days": { "show": false }, "Hours": { "show": false }}}' style="width: 400px;"></div>
<script type="text/javascript">
    $(function() {
        $(".timer").TimeCircles();
    });
</script>

[Davidlab]

Thanks for all your help. Your last suggestion is my best option. I have it go into 2 by 2 for mobile and horizontal for larger screens. Thanks again for you help and the script.

[cheeminjun]

TimeCircles is a nice plugin. Responsive + stacking options would be really nice. Everything is responsive now.

[victor-fabio274]

Cheeminjun, you culd make it responsive usin this code :

$(window).resize(function(){
    $('#count-down').TimeCircles().rebuild();
    });

works for me

ps: sorry about the english rsrsrs

[wimbarelds]

The first post asks about vertically however.

What you could do however is use CSS to rotate the container element 90 degrees, and then again rotate the individual parts back 90 degrees.