Chris Nanney avatar Chris Nanney committed a6efbfd

Changed default counter ID; basing styles on class name now so don't need to alter CSS for multiple counters; removed idPre because was pointless when needing to set a unique ID for each counter - just use that instead; added comma to digits sprite.

Comments (0)

Files changed (7)

 
 THIS YOU NEED TO KEEP.
 
-This assumes the ID of the counter div is "#counter"
+So you can have multiple counters on a page, just make sure each one has a class of "flip-counter".
 
 */
 
-#counter ul.cd{float:left;list-style-type:none;margin:0;padding:0}
-#counter li.t{background:url(../img/digits.png) 0 0 no-repeat;width:53px;height:39px}
-#counter li.b{background:url(../img/digits.png) 0 0 no-repeat;width:53px;height:64px}
-#counter li.s{background:url(../img/comma.png) 2px 75px no-repeat;width:12px;height:100px}
+.flip-counter ul.cd{float:left;list-style-type:none;margin:0;padding:0}
+.flip-counter li{background:url(../img/digits.png) 0 0 no-repeat}
+.flip-counter li.t{background-position:0 0;width:53px;height:39px}
+.flip-counter li.b{background-position:0 0;width:53px;height:64px}
+.flip-counter li.s{background-position:-53px -1030px;width:14px;height:103px}
 body{font-family:verdana}
 p{line-height:16px;margin:0 0 5px}
 #wrapper{float:right;position:relative;left:-50%;margin-top:30px}
-#counter{position:relative;left:50%;clear:both}
+#flip-counter{position:relative;left:50%;clear:both}
 .clear{clear:both}
 #demo_controls{padding:0;width:700px;margin:20px auto;list-style-type:none}
 #demo_controls li{width:700px;text-align:center;margin:0 0 20px;font-weight:bold;font-size:13px}
Removed
Old image
Add a comment to this file

img/digits.png

Old
Old image
New
New image
 
 	<div class="explain">
 		<p>This counter was initialized with the following code:</p>
-		<code>var myCounter = new flipCounter('counter', {value:10000, inc:123, pace:600, auto:true});</code>
+		<code>var myCounter = new flipCounter('flip-counter', {value:10000, inc:123, pace:600, auto:true});</code>
 		<p>Use the controls below to make changes to the counter using built-in methods.</p>
 		<p><a class="back" href="http://cnanney.com/journal/code/apple-style-counter-revisited/">http://cnanney.com/journal/code/apple-style-counter-revisited/</a></p>
 	</div>
 
-	<div id="wrapper"><div id="counter"></div></div>
+	<div id="wrapper"><div id="flip-counter" class="flip-counter"></div></div>
 
 	<div class="clear"></div>
 	<ul id="demo_controls">
 	$(function(){
 		
 		// Initialize a new counter
-		var myCounter = new flipCounter('counter', {value:10000, inc:123, pace:600, auto:true});
+		var myCounter = new flipCounter('flip-counter', {value:10000, inc:123, pace:600, auto:true});
 
 		/**
 		 * Demo controls

js/flipcounter.js

 /**
  * Apple-Style Flip Counter
- * Version 0.5.2 - April 19, 2011 
+ * Version 0.5.3 - May 7, 2011 
  *
  * Copyright (c) 2010 Chris Nanney
  * http://cnanney.com/journal/code/apple-style-counter-revisited/
 		tFH: 39,
 		bFH: 64,
 		fW: 53,
-		bOffset: 390,
-		idPre: 'counter'
+		bOffset: 390
 	};
 	
 	var o = options || {},
 	doc = window.document,
-	div = d && d != '' ? doc.getElementById(d) : doc.getElementById("counter");
+	divId = typeof d !== 'undefined' && d !== '' ? d : 'flip-counter',
+	div = doc.getElementById(divId);
 	
 	for (var opt in defaults) o[opt] = (opt in o) ? o[opt] : defaults[opt];
 
 		function animate(){
 			if (step < 7){
 				w = step < 3 ? 't' : 'b';
-				a = doc.getElementById(o.idPre + "_" + w + "_d" + n);
+				a = doc.getElementById(divId + "_" + w + "_d" + n);
 				if (a) a.style.backgroundPosition = bp[step];
 				step++;
 				if (step != 3) setTimeout(animate, speed);
 		var li = Number(len) - 1;
 		newDigit = doc.createElement("ul");
 		newDigit.className = 'cd';
-		newDigit.id = o.idPre + '_d' + li;
-		newDigit.innerHTML = '<li class="t" id="' + o.idPre + '_t_d' + li + '"></li><li class="b" id="' + o.idPre + '_b_d' + li + '"></li>';
+		newDigit.id = divId + '_d' + li;
+		newDigit.innerHTML = '<li class="t" id="' + divId + '_t_d' + li + '"></li><li class="b" id="' + divId + '_b_d' + li + '"></li>';
 		
 		if (li % 3 == 0){
 			newComma = doc.createElement("ul");
 		}
 		
 		div.insertBefore(newDigit, div.firstChild);
-		doc.getElementById(o.idPre + "_t_d" + li).style.backgroundPosition = '0 -' + (digit * o.tFH) + 'px';
-		doc.getElementById(o.idPre + "_b_d" + li).style.backgroundPosition = '0 -' + (digit * o.bFH + o.bOffset) + 'px';
+		doc.getElementById(divId + "_t_d" + li).style.backgroundPosition = '0 -' + (digit * o.tFH) + 'px';
+		doc.getElementById(divId + "_b_d" + li).style.backgroundPosition = '0 -' + (digit * o.bFH + o.bOffset) + 'px';
 	}
 	
 	// Removes digit
 	function removeDigit(id){
-		var remove = doc.getElementById(o.idPre + "_d" + id);
+		var remove = doc.getElementById(divId + "_d" + id);
 		div.removeChild(remove);
 
 		// Check for leading comma
 	}
 
 	// Sets the correct digits on load
-	function initialDigitCheck(initial){
+	function initialDigitCheck(init){
 		// Creates the right number of digits
-		var initial = initial.toString(),
+		var initial = init.toString(),
 		count = initial.length,
 		bit = 1, i;
 		for (i = 0; i < count; i++){
 			newDigit = doc.createElement("ul");
 			newDigit.className = 'cd';
-			newDigit.id = o.idPre + '_d' + i;
-			newDigit.innerHTML = newDigit.innerHTML = '<li class="t" id="' + o.idPre + '_t_d' + i + '"></li><li class="b" id="' + o.idPre + '_b_d' + i + '"></li>';
+			newDigit.id = divId + '_d' + i;
+			newDigit.innerHTML = newDigit.innerHTML = '<li class="t" id="' + divId + '_t_d' + i + '"></li><li class="b" id="' + divId + '_b_d' + i + '"></li>';
 			div.insertBefore(newDigit, div.firstChild);
 			if (bit != (count) && bit % 3 == 0){
 				newComma = doc.createElement("ul");
 		// Sets them to the right number
 		var digits = splitToArray(initial);
 		for (i = 0; i < count; i++){
-			doc.getElementById(o.idPre + "_t_d" + i).style.backgroundPosition = '0 -' + (digits[i] * o.tFH) + 'px';
-			doc.getElementById(o.idPre + "_b_d" + i).style.backgroundPosition = '0 -' + (digits[i] * o.bFH + o.bOffset) + 'px';
+			doc.getElementById(divId + "_t_d" + i).style.backgroundPosition = '0 -' + (digits[i] * o.tFH) + 'px';
+			doc.getElementById(divId + "_b_d" + i).style.backgroundPosition = '0 -' + (digits[i] * o.bFH + o.bOffset) + 'px';
 		}
 		// Do first animation
 		if (o.auto === true) nextCount = setTimeout(doCount, o.pace);

js/flipcounter.min.js

 /**
  * Apple-Style Flip Counter
- * Version 0.5.2 - April 19, 2011 
+ * Version 0.5.3 - May 7, 2011 
  *
  * Copyright (c) 2010 Chris Nanney
  * http://cnanney.com/journal/code/apple-style-counter-revisited/
  * Licensed under MIT
  * http://www.opensource.org/licenses/mit-license.php
  */
-var flipCounter=function(x,B){function u(){l=a.value;a.value+=a.inc;h=a.value;r(l,h);a.auto===!0&&(n=setTimeout(u,a.pace))}function y(d,f,b){var c=a.value,e=typeof f=="undefined"?!1:f,g=typeof b=="undefined"?1:b;e===!0&&g--;c!=d?(l=a.value,a.auto=!0,c+a.inc<=d&&g!=0?c+=a.inc:c=d,a.value=c,h=a.value,r(l,h),n=setTimeout(function(){y(d,e,g)},a.pace)):a.auto=!1}function r(d,f){v=d.toString().split("").reverse();s=f.toString().split("").reverse();var b,c=v.length,e=s.length;if(e>c)for(b=e-c;b>0;){var g=
-s[e-b],m=Number(e-b+1)-1;i=j.createElement("ul");i.className="cd";i.id=a.idPre+"_d"+m;i.innerHTML='<li class="t" id="'+a.idPre+"_t_d"+m+'"></li><li class="b" id="'+a.idPre+"_b_d"+m+'"></li>';if(m%3==0)o=j.createElement("ul"),o.className="cd",o.innerHTML='<li class="s"></li>',k.insertBefore(o,k.firstChild);k.insertBefore(i,k.firstChild);j.getElementById(a.idPre+"_t_d"+m).style.backgroundPosition="0 -"+g*a.tFH+"px";j.getElementById(a.idPre+"_b_d"+m).style.backgroundPosition="0 -"+(g*a.bFH+a.bOffset)+
-"px";b--}if(e<c)for(b=c-e;b>0;){e=j.getElementById(a.idPre+"_d"+(c-b));k.removeChild(e);e=k.firstChild.firstChild;if((" "+e.className+" ").indexOf(" s ")>-1)e=e.parentNode,k.removeChild(e);b--}for(b=0;b<c;b++)s[b]!=v[b]&&C(b,v[b],s[b])}function C(d,f,b){function c(){if(g<7){m=g<3?"t":"b";if(h=j.getElementById(a.idPre+"_"+m+"_d"+d))h.style.backgroundPosition=i[g];g++;g!=3?setTimeout(c,e):c()}}var e,g=0,m,h,i=["-"+a.fW+"px -"+f*a.tFH+"px",a.fW*-2+"px -"+f*a.tFH+"px","0 -"+b*a.tFH+"px","-"+a.fW+"px -"+
-(f*a.bFH+a.bOffset)+"px",a.fW*-2+"px -"+(b*a.bFH+a.bOffset)+"px",a.fW*-3+"px -"+(b*a.bFH+a.bOffset)+"px","0 -"+(b*a.bFH+a.bOffset)+"px"];if(a.auto===!0&&a.pace<=300)switch(d){case 0:e=a.pace/6;break;case 1:e=a.pace/5;break;case 2:e=a.pace/4;break;case 3:e=a.pace/3;break;default:e=a.pace/1.5}else e=80;e=e>80?80:e;c()}function A(a,f,b,c,e){var g={result:!0};g.cond1=a/f>=1?!0:!1;g.cond2=f*b<=a?!0:!1;g.cond3=Math.abs(f*b-a)<=10?!0:!1;g.cond4=Math.abs(f*c-e)<=100?!0:!1;g.cond5=f*c<=e?!0:!1;if(g.cond1&&
-g.cond2&&g.cond4&&g.cond5){a=Math.abs(a-f*b)+Math.abs(f*c-e);if(p.q===null)p.q=a;if(a<=p.q)p.pace=c,p.inc=b}for(b=1;b<=5;b++)if(g["cond"+b]===!1)g.result=!1;return g}function q(a){return!isNaN(parseFloat(a))&&isFinite(a)}function z(){clearTimeout(n);n=null}var w={value:0,inc:1,pace:1E3,auto:!0,tFH:39,bFH:64,fW:53,bOffset:390,idPre:"counter"},a=B||{},j=window.document,k=x&&x!=""?j.getElementById(x):j.getElementById("counter"),t;for(t in w)a[t]=t in a?a[t]:w[t];var v=[],s=[],l,h,n=null,i,o,p={q:null,
-pace:0,inc:0};this.setValue=function(d){if(q(d))l=a.value,h=d,a.value=d,r(l,h);return this};this.setIncrement=function(d){a.inc=q(d)?d:w.inc;return this};this.setPace=function(d){a.pace=q(d)?d:w.pace;return this};this.setAuto=function(d){if(d&&!a.atuo)a.auto=!0,u();if(!d&&a.auto)n&&z(),a.auto=!1;return this};this.step=function(){a.auto||u();return this};this.add=function(d){if(q(d))l=a.value,a.value+=d,h=a.value,r(l,h);return this};this.subtract=function(d){if(q(d))l=a.value,a.value-=d,a.value>=0?
-h=a.value:(h="0",a.value=0),r(l,h);return this};this.incrementTo=function(d,f,b){n&&z();if(typeof f!="undefined"){var f=q(f)?f*1E3:1E4,b=typeof b!="undefined"&&q(b)?b:a.pace,c=typeof d!="undefined"&&q(d)?d-a.value:0,e,g,h,i=0;p.q=null;b=f/c>b?Math.round(f/c/10)*10:b;e=Math.floor(f/b);g=Math.floor(c/e);h=A(c,e,g,b,f);if(c>0){for(;h.result===!1&&i<100;)b+=10,e=Math.floor(f/b),g=Math.floor(c/e),h=A(c,e,g,b,f),i++;i==100?(a.inc=p.inc,a.pace=p.pace):(a.inc=g,a.pace=b);y(d,!0,e)}}else y(d)};this.getValue=
-function(){return a.value};this.stop=function(){n&&z();return this};(function(d){var d=d.toString(),f=d.length,b=1,c;for(c=0;c<f;c++){i=j.createElement("ul");i.className="cd";i.id=a.idPre+"_d"+c;i.innerHTML=i.innerHTML='<li class="t" id="'+a.idPre+"_t_d"+c+'"></li><li class="b" id="'+a.idPre+"_b_d"+c+'"></li>';k.insertBefore(i,k.firstChild);if(b!=f&&b%3==0)o=j.createElement("ul"),o.className="cd",o.innerHTML='<li class="s"></li>',k.insertBefore(o,k.firstChild);b++}d=d.toString().split("").reverse();
-for(c=0;c<f;c++)j.getElementById(a.idPre+"_t_d"+c).style.backgroundPosition="0 -"+d[c]*a.tFH+"px",j.getElementById(a.idPre+"_b_d"+c).style.backgroundPosition="0 -"+(d[c]*a.bFH+a.bOffset)+"px";a.auto===!0&&(n=setTimeout(u,a.pace))})(a.value)};
+var flipCounter=function(y,C){function v(){m=a.value;a.value+=a.inc;h=a.value;s(m,h);a.auto===!0&&(o=setTimeout(v,a.pace))}function z(d,f,b){var c=a.value,e=typeof f=="undefined"?!1:f,g=typeof b=="undefined"?1:b;e===!0&&g--;c!=d?(m=a.value,a.auto=!0,c+a.inc<=d&&g!=0?c+=a.inc:c=d,a.value=c,h=a.value,s(m,h),o=setTimeout(function(){z(d,e,g)},a.pace)):a.auto=!1}function s(d,f){w=d.toString().split("").reverse();t=f.toString().split("").reverse();var b,c=w.length,e=t.length;if(e>c)for(b=e-c;b>0;){var g=
+t[e-b],n=Number(e-b+1)-1;i=k.createElement("ul");i.className="cd";i.id=j+"_d"+n;i.innerHTML='<li class="t" id="'+j+"_t_d"+n+'"></li><li class="b" id="'+j+"_b_d"+n+'"></li>';if(n%3==0)p=k.createElement("ul"),p.className="cd",p.innerHTML='<li class="s"></li>',l.insertBefore(p,l.firstChild);l.insertBefore(i,l.firstChild);k.getElementById(j+"_t_d"+n).style.backgroundPosition="0 -"+g*a.tFH+"px";k.getElementById(j+"_b_d"+n).style.backgroundPosition="0 -"+(g*a.bFH+a.bOffset)+"px";b--}if(e<c)for(b=c-e;b>
+0;){e=k.getElementById(j+"_d"+(c-b));l.removeChild(e);e=l.firstChild.firstChild;if((" "+e.className+" ").indexOf(" s ")>-1)e=e.parentNode,l.removeChild(e);b--}for(b=0;b<c;b++)t[b]!=w[b]&&D(b,w[b],t[b])}function D(d,f,b){function c(){if(g<7){n=g<3?"t":"b";if(h=k.getElementById(j+"_"+n+"_d"+d))h.style.backgroundPosition=i[g];g++;g!=3?setTimeout(c,e):c()}}var e,g=0,n,h,i=["-"+a.fW+"px -"+f*a.tFH+"px",a.fW*-2+"px -"+f*a.tFH+"px","0 -"+b*a.tFH+"px","-"+a.fW+"px -"+(f*a.bFH+a.bOffset)+"px",a.fW*-2+"px -"+
+(b*a.bFH+a.bOffset)+"px",a.fW*-3+"px -"+(b*a.bFH+a.bOffset)+"px","0 -"+(b*a.bFH+a.bOffset)+"px"];if(a.auto===!0&&a.pace<=300)switch(d){case 0:e=a.pace/6;break;case 1:e=a.pace/5;break;case 2:e=a.pace/4;break;case 3:e=a.pace/3;break;default:e=a.pace/1.5}else e=80;e=e>80?80:e;c()}function B(a,f,b,c,e){var g={result:!0};g.cond1=a/f>=1?!0:!1;g.cond2=f*b<=a?!0:!1;g.cond3=Math.abs(f*b-a)<=10?!0:!1;g.cond4=Math.abs(f*c-e)<=100?!0:!1;g.cond5=f*c<=e?!0:!1;if(g.cond1&&g.cond2&&g.cond4&&g.cond5){a=Math.abs(a-
+f*b)+Math.abs(f*c-e);if(q.q===null)q.q=a;if(a<=q.q)q.pace=c,q.inc=b}for(b=1;b<=5;b++)if(g["cond"+b]===!1)g.result=!1;return g}function r(a){return!isNaN(parseFloat(a))&&isFinite(a)}function A(){clearTimeout(o);o=null}var x={value:0,inc:1,pace:1E3,auto:!0,tFH:39,bFH:64,fW:53,bOffset:390},a=C||{},k=window.document,j=typeof y!=="undefined"&&y!==""?y:"flip-counter",l=k.getElementById(j),u;for(u in x)a[u]=u in a?a[u]:x[u];var w=[],t=[],m,h,o=null,i,p,q={q:null,pace:0,inc:0};this.setValue=function(d){if(r(d))m=
+a.value,h=d,a.value=d,s(m,h);return this};this.setIncrement=function(d){a.inc=r(d)?d:x.inc;return this};this.setPace=function(d){a.pace=r(d)?d:x.pace;return this};this.setAuto=function(d){if(d&&!a.atuo)a.auto=!0,v();if(!d&&a.auto)o&&A(),a.auto=!1;return this};this.step=function(){a.auto||v();return this};this.add=function(d){if(r(d))m=a.value,a.value+=d,h=a.value,s(m,h);return this};this.subtract=function(d){if(r(d))m=a.value,a.value-=d,a.value>=0?h=a.value:(h="0",a.value=0),s(m,h);return this};this.incrementTo=
+function(d,f,b){o&&A();if(typeof f!="undefined"){var f=r(f)?f*1E3:1E4,b=typeof b!="undefined"&&r(b)?b:a.pace,c=typeof d!="undefined"&&r(d)?d-a.value:0,e,g,h,i=0;q.q=null;b=f/c>b?Math.round(f/c/10)*10:b;e=Math.floor(f/b);g=Math.floor(c/e);h=B(c,e,g,b,f);if(c>0){for(;h.result===!1&&i<100;)b+=10,e=Math.floor(f/b),g=Math.floor(c/e),h=B(c,e,g,b,f),i++;i==100?(a.inc=q.inc,a.pace=q.pace):(a.inc=g,a.pace=b);z(d,!0,e)}}else z(d)};this.getValue=function(){return a.value};this.stop=function(){o&&A();return this};
+(function(d){var f=d.toString(),d=f.length,b=1,c;for(c=0;c<d;c++){i=k.createElement("ul");i.className="cd";i.id=j+"_d"+c;i.innerHTML=i.innerHTML='<li class="t" id="'+j+"_t_d"+c+'"></li><li class="b" id="'+j+"_b_d"+c+'"></li>';l.insertBefore(i,l.firstChild);if(b!=d&&b%3==0)p=k.createElement("ul"),p.className="cd",p.innerHTML='<li class="s"></li>',l.insertBefore(p,l.firstChild);b++}f=f.toString().split("").reverse();for(c=0;c<d;c++)k.getElementById(j+"_t_d"+c).style.backgroundPosition="0 -"+f[c]*a.tFH+
+"px",k.getElementById(j+"_b_d"+c).style.backgroundPosition="0 -"+(f[c]*a.bFH+a.bOffset)+"px";a.auto===!0&&(o=setTimeout(v,a.pace))})(a.value)};
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.