Circular-Countdown
Circular-Countdown copied to clipboard
Update jquery.ccountdown.js
Because this is a count down, the circles must be decreased and go backward to zero so it must be ([max]-[the current value]) so it should be _dday=Math.floor(365-(_dd/(60_60_1000_24)_1)); _dhour=Math.floor(24-((_dd%(60_60_1000_24))/(60_60_1000)_1)); _dmin=Math.floor(60-(((_dd%(60_60_1000_24))%(60_60_1000))/(60_1000)_1)); _dsec=Math.floor(60-((((_dd%(60_60_1000_24))%(60_60_1000))%(60_1000))/1000_1));
or get the max from $('.days').attr('data-max'); and ...
I am not getting it..could you please show me your demo page after changes ?
I mean after counting down the circle is completing. I think the circle should move CCW and not CW, your circle is increasing by time, for example your text is showing 50 > 49 > 48 > ... > 0 (decreasing) but your circle is completing like this 0> 1> 2 > ... > 50 (increasing). If this is not clear enough, I will upload a demo.
The updated math isn't working for me, but I'm interested in replicating this idea (a countdown rather than a countup), is this working on your end @d33v?
yes, I make a under construction theme with it but I had to make some changes to it, i had to add another element to show the values, I was in a hurry so sorry if its messy! :) I added div with class="secondtext" div with class="minutetext" div with class="hourtext" div with class="daytext" to index.html file then changed part of jquery.ccountdown,js to /* calculation of remaining days, hrs, min, and secs _/ _dd=Date.parse(_futurestring)-Date.parse(_todaystring); _dday=Math.floor(365-(_dd/(60_60_1000_24)_1)); _dhour=Math.floor(24-((_dd%(60_60_1000_24))/(60_60_1000)_1)); _dmin=Math.floor(60-(((_dd%(60_60_1000_24))%(60_60_1000))/(60_1000)_1)); _dsec=Math.floor(60-((((_dd%(60_60_1000_24))%(60_60_1000))%(60_1000))/1000*1)); var $ss = $(".second"), $mm = $(".minute"),$hh = $(".hour"),$dd = $(".days"); $ss.val(_dsec); //here is what is making the math! another digit container! $('.secondtext').html((60-(_dsec))+' second(s)'); $('.minutetext').html((60-(_dmin))+' minute(s)'); $('.hourtext').html((24-(_dhour))+' hour(s)'); $('.daytext').html((360-(_dday))+' day(s)'); ... I had to make it work fast so I didn't think for the best solution, canvas and number values are relate to each other but they go opposite directions! if you change one it will change the other one! I hope this will help you!
Or you could just change the angleArc variable to -360 instead of 360.
^ +1
@d33v could you please share a link to underconstruction theme if possible ? I'll check it and will merge your pull request. I know multiple countdown isn't working..probably I'll spend some time in this holiday to make it work. Thx.
link to under construction ( messy version ;) ): http://thedeev.net/coming-soon/
@d33v cool....I think we should give option to set direction (clockwise or anticlockwise) to user ? any thoughts?