inital commit
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
# Description
|
||||
|
||||
A simple animated counter, accepts numbers or strings
|
||||
|
||||
# Requirements
|
||||
|
||||
<p>JQuery 1.7 or later</p>
|
||||
|
||||
# Example
|
||||
[View Examples](http://kCounter.kudoslabs.co.uk)
|
||||
|
||||
# Usage & Examples
|
||||
|
||||
### inlcude jquery and kcounter (optionally jquery ui)
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
|
||||
<script src="/path/to/kcounter.js"></script>
|
||||
|
||||
### html
|
||||
`<div id="example">12345</div>`
|
||||
|
||||
### initialise (uses element contents)
|
||||
`$('#example').kCounter() ;`
|
||||
|
||||
### initialise with options
|
||||
`$('#example').kCounter({ initial: 54321 }) ;`
|
||||
|
||||
### update the counter
|
||||
`$('#example').kCounter('update', 12345) ;`
|
||||
|
||||
|
||||
# Available options and defaults
|
||||
<pre>
|
||||
'height' : 50, // The default height of an individual counter
|
||||
'width' : 50, // The default width of an individual counter
|
||||
'initial' : false // Override the element content if desired,
|
||||
'easing' : 'swing' // [swing,linear] unless using easing plugin (Jquery UI)
|
||||
'duration' : 'fast' // [slow,fast,integer value]
|
||||
</pre>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery kCounter Plugin Demos</title>
|
||||
|
||||
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" class="cssfx">
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||||
|
||||
<script src="js/kcounter.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="jquery-script-menu">
|
||||
<div class="jquery-script-center">
|
||||
<ul>
|
||||
<li><a href="http://www.jqueryscript.net/time-clock/jQuery-Plugin-For-Creating-An-Animated-Counter-kCounter.html">Download This Plugin</a></li>
|
||||
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
|
||||
</ul>
|
||||
<div class="jquery-script-ads"><script type="text/javascript"><!--
|
||||
google_ad_client = "ca-pub-2783044520727903";
|
||||
/* jQuery_demo */
|
||||
google_ad_slot = "2780937993";
|
||||
google_ad_width = 728;
|
||||
google_ad_height = 90;
|
||||
//-->
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
|
||||
</script></div>
|
||||
<div class="jquery-script-clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 style="margin-top:150px;">jQuery kCounter Plugin Demos</h1>
|
||||
<div id="example1" class="example">1024</div>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
var num = 1024 ;
|
||||
// initialise
|
||||
$('#example1').kCounter({ initial: num, duration: 1000, easing: 'easeOutElastic' }) ;
|
||||
setInterval(function() {
|
||||
$('#example1').kCounter('update', num++) ;
|
||||
}, 1000 );
|
||||
|
||||
}) ;
|
||||
</script>
|
||||
<div id="example2" class="example">Click below</div>
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// initialise
|
||||
$('#example2').kCounter() ;
|
||||
|
||||
}) ;
|
||||
</script>
|
||||
<p>
|
||||
<a href="#" onclick="$('#example2').kCounter('update', 12345) ;return false;">Number</a>
|
||||
<a href="#" onclick="$('#example2').kCounter('update', 987654321) ;return false;">Number</a>
|
||||
<a href="#" onclick="$('#example2').kCounter('update', '0a3b7c') ;return false;">Mixed</a>
|
||||
<a href="#" onclick="$('#example2').kCounter('update', '13/12/1979') ;return false;">Date</a>
|
||||
<a href="#" onclick="$('#example2').kCounter('update', -20) ;return false;">Negative number</a>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-36251023-1']);
|
||||
_gaq.push(['_setDomainName', 'jqueryscript.net']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
public/plugins/jQuery-Plugin-For-Creating-An-Animated-Counter-kCounter/js/cssfx.min.js
vendored
Normal file
1
public/plugins/jQuery-Plugin-For-Creating-An-Animated-Counter-kCounter/js/cssfx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,151 @@
|
||||
/*!
|
||||
* jQuery counter Plugin
|
||||
* http://kcounter.kudoslabs.co.uk
|
||||
* Copyright (c) 2012 Kudos
|
||||
* Version: 0.1
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
* Requires: jQuery v1.7 or later
|
||||
*/
|
||||
(function($){
|
||||
|
||||
var methods = {
|
||||
init : function( options ){
|
||||
|
||||
// defaults
|
||||
settings = $.extend({
|
||||
height: 50,
|
||||
width: 50,
|
||||
initial: false,
|
||||
easing: 'swing',
|
||||
duration: 'fast'
|
||||
}, options);
|
||||
|
||||
$(this).data('settings',settings) ;
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
var $this = $(this),
|
||||
initialContent = settings.initial ? settings.initial : $this.html() , // get the initial content
|
||||
chars = initialContent.toString().split("") , // everything is a string!
|
||||
html = "" ;
|
||||
|
||||
$.each(chars, function(index, value) { // build individual counters
|
||||
if( $.isNumeric(value) ) {
|
||||
html += "<ul><li style=\"top:-"+(value*settings.height)+"px\">" ;
|
||||
for (var i = 0; i < 10; i++) {
|
||||
html += '<span>'+ i +'</span>' ;
|
||||
}
|
||||
html += "</li></ul>" ;
|
||||
} else {
|
||||
html += '<ul><li><span>'+value+'</span></li></ul>' ;
|
||||
}
|
||||
});
|
||||
$this.html(html) ;
|
||||
|
||||
methods.updateCss.call($this, settings);
|
||||
|
||||
}) ;
|
||||
|
||||
},
|
||||
updateCss : function(settings) {
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
$this.css({
|
||||
'overflow' : 'hidden'
|
||||
}) ;
|
||||
$('ul', $this).css({
|
||||
'position' : 'relative',
|
||||
'float' : 'left',
|
||||
'overflow' : 'hidden',
|
||||
'height' : settings.height+'px',
|
||||
'width' : settings.width+'px',
|
||||
'line-height' : settings.height+'px'
|
||||
}) ;
|
||||
$('li', $this).css({
|
||||
'position' : 'absolute',
|
||||
'width' : settings.width+'px'
|
||||
}) ;
|
||||
$('span', $this).css({
|
||||
'display' : 'block',
|
||||
'text-align' : 'center',
|
||||
'height' : settings.height+'px',
|
||||
'width' : settings.width+'px',
|
||||
}) ;
|
||||
}) ;
|
||||
},
|
||||
update : function( content ) {
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
var $this = $(this),
|
||||
chars = content.toString().split(""),
|
||||
numberCounters = $('ul', $this).length,
|
||||
settings = $(this).data('settings'),
|
||||
diff, html;
|
||||
|
||||
if(numberCounters!==chars.length){
|
||||
diff = chars.length-numberCounters ;
|
||||
numberCounters = chars.length ;
|
||||
|
||||
// decide whether to add or remove values
|
||||
if( diff<0 ) {
|
||||
|
||||
$('ul', $this).slice(diff).remove() ;
|
||||
|
||||
} else {
|
||||
|
||||
html = '' ;
|
||||
while (diff--) {
|
||||
html += "<ul><li>" ;
|
||||
for (var i = 0; i < 10; i++) {
|
||||
html += '<span>'+ i +'</span>' ;
|
||||
}
|
||||
html += "</li></ul>" ;
|
||||
}
|
||||
$this.prepend(html) ;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
$.each(chars, function(index, value){
|
||||
var html = '';
|
||||
if (settings.duration === 0) {
|
||||
$('ul:nth-child('+(index+1)+') li', $this).html("<span>"+value+"</span>").css({top: 0});
|
||||
return;
|
||||
}
|
||||
if( $.isNumeric(value) ) {
|
||||
if( $('ul:nth-child('+(index+1)+') li span', $this).length==1 ) { // if this value was previously a char change it
|
||||
for (var i = 0; i < 10; i++) {
|
||||
html += '<span>'+ i +'</span>' ;
|
||||
}
|
||||
$('ul:nth-child('+(index+1)+') li', $this).html(html) ;
|
||||
}
|
||||
$('ul:nth-child('+(index+1)+') li', $this).animate({ top: -value * settings.height }, settings.duration, settings.easing ) ;
|
||||
} else {
|
||||
$('ul:nth-child('+(index+1)+') li', $this).html("<span>"+value+"</span>").animate({top: 0}, settings.duration, settings.easing) ;
|
||||
}
|
||||
});
|
||||
|
||||
methods.updateCss.call($this, settings);
|
||||
|
||||
}) ;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.kCounter = function( method ){
|
||||
|
||||
if ( methods[method] ) {
|
||||
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.kCounter' );
|
||||
}
|
||||
|
||||
};
|
||||
})( jQuery );
|
||||
1
public/plugins/jQuery-Plugin-For-Creating-An-Animated-Counter-kCounter/js/kcounter.min.js
vendored
Normal file
1
public/plugins/jQuery-Plugin-For-Creating-An-Animated-Counter-kCounter/js/kcounter.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
(function(b){var a={init:function(c){settings=b.extend({height:50,width:50,initial:false,easing:"swing",duration:"fast"},c);b(this).data("settings",settings);return this.each(function(){var g=b(this),f=settings.initial?settings.initial:g.html(),e=f.toString().split(""),d="";b.each(e,function(h,k){if(b.isNumeric(k)){d+='<ul><li style="top:-'+(k*settings.height)+'px">';for(var j=0;j<10;j++){d+="<span>"+j+"</span>"}d+="</li></ul>"}else{d+="<ul><li><span>"+k+"</span></li></ul>"}});g.html(d);a.updateCss.call(g,settings)})},updateCss:function(c){return this.each(function(){var d=b(this);d.css({overflow:"hidden"});b("ul",d).css({position:"relative","float":"left",overflow:"hidden",height:c.height+"px",width:c.width+"px","line-height":c.height+"px"});b("li",d).css({position:"absolute",width:c.width+"px"});b("span",d).css({display:"block","text-align":"center",height:c.height+"px",width:c.width+"px"})})},update:function(c){return this.each(function(){var k=b(this),h=c.toString().split(""),f=b("ul",k).length,g=b(this).data("settings"),j,e;if(f!==h.length){j=h.length-f;f=h.length;if(j<0){b("ul",k).slice(j).remove()}else{e="";while(j--){e+="<ul><li>";for(var d=0;d<10;d++){e+="<span>"+d+"</span>"}e+="</li></ul>"}k.prepend(e)}}b.each(h,function(l,o){var n="";if(g.duration===0){b("ul:nth-child("+(l+1)+") li",k).html("<span>"+o+"</span>").css({top:0});return}if(b.isNumeric(o)){if(b("ul:nth-child("+(l+1)+") li span",k).length==1){for(var m=0;m<10;m++){n+="<span>"+m+"</span>"}b("ul:nth-child("+(l+1)+") li",k).html(n)}b("ul:nth-child("+(l+1)+") li",k).animate({top:-o*g.height},g.duration,g.easing)}else{b("ul:nth-child("+(l+1)+") li",k).html("<span>"+o+"</span>").animate({top:0},g.duration,g.easing)}});a.updateCss.call(k,g)})}};b.fn.kCounter=function(c){if(a[c]){return a[c].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof c==="object"||!c){return a.init.apply(this,arguments)}else{b.error("Method "+c+" does not exist on jQuery.kCounter")}}}})(jQuery);
|
||||
@@ -0,0 +1,5 @@
|
||||
ul,li { margin:0; padding:0; list-style:none}
|
||||
#examples h3,
|
||||
.example{ margin-bottom: 20px ; }
|
||||
.example ul{ background: #111 ; color: #fff ; }
|
||||
|
||||
Reference in New Issue
Block a user