nikhiln / circular-countdown Goto Github PK

View Code? Open in Web Editor NEW

47.0 12.0 26.0 208 KB

A nice and attractive circular count down

Home Page: http://nikhilnavadiya.in/projects/CircularCountDown/

License: MIT License

CSS 49.15% JavaScript 50.85%

circular-countdown's Introduction

Circular Count Down

only one function call requires to start count down
uses canvas to display dials. Uses jQuery Knob for generating dials.

Example

<input class="knob days" data-readOnly="true" data-width="150" data-displayPrevious=true data-fgColor="#66EE66" data-skin="tron" data-thickness=".2" data-min="0" data-max="365" value="75">

<input class="knob hour" data-readOnly="true" data-width="150" data-min="0" data-max="24" data-displayPrevious=true data-fgColor="#800080" data-skin="tron" data-thickness=".2" value="75">

<input class="knob minute" data-readOnly="true" data-width="150" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">

<input class="knob second" data-readOnly="true" data-width="150" data-min="0" data-max="60" data-displayPrevious=true data-fgColor="#00CED1" data-skin="tron" data-thickness=".2" value="75">

<script>
	$(".ccounter").ccountdown(2013,5,25,'18:00'); //only need to pass target date and time
</script>

You can change the style of each dial. See documentation of jQuery Knob

Set only target date

Pass the target year, month, day, and time (24-hour) in the ccountdown function, rest of handled by circular countdown script.
<script>
	e.g. year -> 2013, Month -> 5, Day -> 25, Time -> 18:00
	$(".ccounter").ccountdown(2013,5,25, '18:00');
</script>

Supported browser

Tested on Chrome, Safari, Firefox, IE 9.0.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

circular-countdown's People

Contributors

Stargazers

Watchers

circular-countdown's Issues

is it possible to add months and years to countdown?

id like to add months and years to my count down becouse i work whit big time data ranges
i nee dto use 1 year 3months 14 days 23 hours 04 minutes 12 seconds

Is it possible to display text for each bottom second, minute, hour or days

Countdown is awesome ...
How can i display text each counter bottom "second", "minute", "hour" or "days"

Thanks

Timezone support

Countdown should display remaining time according to user's timezone.

Clear or Restart

I want to dynamically update the countdown, I can get this to work but they countdowns just overlap each other.

Is there a way to stop the countdown, clear it and start a new one on a button click?

No countdown in index.html (circles showing 0)

Just downloaded a zip and here's a screenshot of index.html showing all circles starting at 0 (no countdown).

code related to dial should be auto generated.

Currently user needs to write down all the inputs(type of text) with specific class and then countdown is using them. But all of this input related code should be auto generated. It should take input for its style only.

Does not work in Safari and IE11

$(document).ready(function(){ $(".ccounter").ccountdown(2018,11,01,'24:00'); });

This does not work in IE and Safari. Do you have an idea why?

Countdown is showing same value for two different instances of countdown

Countdown is showing same value for two different instances of countdown..

Can not set the date

Every time try to set the date, it goes to -185 days.

In the .js file

$ss.val(_dsec).trigger("change"); $mm.val(_dmin).trigger("change"); $hh.val(_dhour).trigger("change"); $dd.val(_dday).trigger("change");``
Am I suppose to change the "change" to the date/time I want it to be? If so changing this, no matter what date I enter will trigger it to go to -185 days.

If I enter the <script> $(".ccounter").ccountdown(2016,8,01, '18:00'); </script>

and leave the js untouched, nothing happens...

wtf am I doing wrong here?

Inner thickness in tron skin

Cool plugin... loved it..
How can i reduce inner thickness width in tron skin.

Thanks in advance.