Commits

Chris Nanney committed d39bb14

Backed out changeset: 4fb76b8ffe90
Leaving as-is and only compatible with jQuery 1.4.4 and lower. With 1.5 there is no cross-browser way to animate background position without external plugin.

Comments (0)

Files changed (3)

 
 	<title>New Apple-Style Flip Counter Demo</title>
 	<meta charset="utf-8" />
-	<meta name="description" content="A more functional version of my Apple-Style Flip Counter." />
+	<meta name="description" content="A more functional version of my Apple-Style Counter." />
 	<meta name="keywords" content="HTML,CSS,JavaScript,counter,apple-style,flip,animate,digit,demo" />
 	<meta name="author" content="Chris Nanney" />
 
 	<!-- jQuery from Google CDN, REQUIRED -->
-	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
+	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 	<!-- My flip counter script, REQUIRED -->
-	<script type="text/javascript" src="js/flipcounter.min.js"></script>
+	<script type="text/javascript" src="js/flipcounter.js"></script>
 	<!-- Style sheet for the counter, REQUIRED -->
 	<link rel="stylesheet" type="text/css" href="css/counter.css" />
 

js/flipcounter.js

  * Licensed under MIT
  * http://www.opensource.org/licenses/mit-license.php
  */
+
 var flipCounter = function(d, options){
 
 	// Default values
 		// Do animation
 		jQuery(div + " #d" + n + " li.t")
 		// Top old digit postion 2
-		.delay(speed).animate({'backgroundPositionX': -frameWidth, 'backgroundPositionY': -oldDigit * tFrameHeight}, 0)
+		.delay(speed).animate({'background-position': '-' + frameWidth + 'px -' + (oldDigit * tFrameHeight) + 'px'}, 0)
 			// Top old digit position 3
-			.delay(speed).animate({'backgroundPositionX': frameWidth * -2, 'backgroundPositionY': -oldDigit * tFrameHeight}, 0)
+			.delay(speed).animate({'background-position': (frameWidth * -2) + 'px -' + (oldDigit * tFrameHeight) + 'px'}, 0)
 			// Top new digit position 1
-			.delay(speed).animate({'backgroundPositionX': 0, 'backgroundPositionY': -newDigit * tFrameHeight}, 0, function(){
+			.delay(speed).animate({'background-position': '0 -' + (newDigit * tFrameHeight) + 'px'}, 0, function(){
 				jQuery(div + " #d" + n + " li.b")
 					// Bottom old digit position 2
-					.animate({'backgroundPositionX': -frameWidth, 'backgroundPositionY': -oldDigit * bFrameHeight}, 0)
+					.animate({'background-position': '-' + frameWidth + 'px -' + (oldDigit * bFrameHeight) + 'px'}, 0)
 					// Bottom old digit position 3
-					.delay(speed).animate({'backgroundPositionX': frameWidth * -2, 'backgroundPositionY': -newDigit * bFrameHeight}, 0)
+					.delay(speed).animate({'background-position': (frameWidth * -2) + 'px -' + (newDigit * bFrameHeight) + 'px'}, 0)
 					// Bottom old digit position 4
-					.delay(speed).animate({'backgroundPositionX': frameWidth * -3, 'backgroundPositionY': -newDigit * bFrameHeight}, 0)
+					.delay(speed).animate({'background-position': (frameWidth * -3) + 'px -' + (newDigit * bFrameHeight) + 'px'}, 0)
 					// Bottom new digit position 1
-					.delay(speed).animate({'backgroundPositionX': 0, 'backgroundPositionY': -newDigit * bFrameHeight}, 0);
+					.delay(speed).animate({'background-position': '0 -' + (newDigit * bFrameHeight) + 'px'}, 0);
 			});
 	}
 	

js/flipcounter.min.js

  * Licensed under MIT
  * http://www.opensource.org/licenses/mit-license.php
  */
-var flipCounter=function(z,H){function t(){j=b.value.toString();b.value+=b.inc;i=b.value.toString();o(j,i);if(b.auto===true)l=setTimeout(t,b.pace)}function A(a,e,c){var d=b.value,g=typeof e=="undefined"?false:e,f=typeof c=="undefined"?1:c;g===true&&f--;if(d!=a){j=b.value.toString();b.auto=true;if(d+b.inc<=a&&f!=0)d+=b.inc;else d=a;b.value=d;i=b.value.toString();o(j,i);l=setTimeout(function(){A(a,g,f)},b.pace)}else b.auto=false}function o(a,e){u=B(a);v=B(e);if(e.length>a.length)for(var c=e.length-
-a.length;c>0;){var d=v[e.length-c],g=Number(e.length-c+1)-1;g%3==0&&jQuery(h).prepend('<ul class="cd"><li class="s"></li></ul>');jQuery(h).prepend('<ul class="cd" id="d'+g+'"><li class="t"></li><li class="b"></li></ul>');jQuery(h+" #d"+g+" li.t").css({"background-position":"0 -"+d*p+"px"});jQuery(h+" #d"+g+" li.b").css({"background-position":"0 -"+d*n+"px"});c--}if(e.length<a.length)for(c=a.length-e.length;c>0;){jQuery(h+" #d"+(a.length-c)).remove();d=jQuery(h+" li").first();d.hasClass("s")&&d.parent("ul").remove();
-c--}for(c=0;c<u.length;c++)v[c]!=u[c]&&I(c,u[c],v[c])}function I(a,e,c){var d;if(b.auto===true&&b.pace<=300)switch(a){case 0:d=b.pace/6;break;case 1:d=b.pace/5;break;case 2:d=b.pace/4;break;case 3:d=b.pace/3;break;default:d=b.pace/2}else d=80;d=d>80?80:d;jQuery(h+" #d"+a+" li.t").delay(d).animate({backgroundPositionX:-q,backgroundPositionY:-e*p},0).delay(d).animate({backgroundPositionX:q*-2,backgroundPositionY:-e*p},0).delay(d).animate({backgroundPositionX:0,backgroundPositionY:-c*p},0,function(){jQuery(h+
-" #d"+a+" li.b").animate({backgroundPositionX:-q,backgroundPositionY:-e*n},0).delay(d).animate({backgroundPositionX:q*-2,backgroundPositionY:-c*n},0).delay(d).animate({backgroundPositionX:q*-3,backgroundPositionY:-c*n},0).delay(d).animate({backgroundPositionX:0,backgroundPositionY:-c*n},0)})}function B(a){for(var e=[],c=0;c<a.length;c++){E=a.length-(c+1);F=a.length-c;e[c]=a.substring(E,F)}return e}function G(a,e,c,d,g){var f={result:true};f.cond1=a/e>=1?true:false;f.cond2=e*c<=a?true:false;f.cond3=
-Math.abs(e*c-a)<=5?true:false;f.cond4=Math.abs(e*d-g)<=100?true:false;f.cond5=e*d<=g?true:false;f.str="Condition Checks:\n";for(var k=1;k<=5;k++){f.str+=k+": ";if(f["cond"+k]===false){f.str+="FAIL";f.result=false}else f.str+="PASS";f.str+=k<5?", ":""}f.str+="\n----\n   Pace: "+d+"\n   Cycles: "+e+"\n   Calculated Inc: "+a/e+"\n   Rounded Inc: "+c+"\n   Calculated time: "+Math.abs(e*d)+"\n   Target time: "+g+"\n   ACTUAL END VALUE: "+(e*c+b.value);return f}function m(a){return!isNaN(parseFloat(a))&&
-isFinite(a)}function C(){clearTimeout(l);l=null}var w={value:0,inc:1,pace:1E3,auto:true,debug:false},b=H||{},h=z&&z!=""?"#"+z:"#counter",r;for(r in w)b[r]=r in b?b[r]:w[r];var p=39,n=64,q=53,u=[],v=[],E,F,j,i,l=null;this.setValue=function(a){if(m(a)){j=b.value.toString();i=a.toString();b.value=a;o(j,i)}return this};this.setIncrement=function(a){b.inc=m(a)?a:w.inc;return this};this.setPace=function(a){b.pace=m(a)?a:w.pace;return this};this.setAuto=function(a){if(a&&!b.atuo){b.auto=true;t()}if(!a&&
-b.auto){l&&C();b.auto=false}return this};this.step=function(){b.auto||t();return this};this.add=function(a){if(m(a)){j=b.value.toString();b.value+=a;i=b.value.toString();o(j,i)}return this};this.subtract=function(a){if(m(a)){j=b.value.toString();b.value-=a;if(b.value>=0)i=b.value.toString();else{i="0";b.value=0}o(j,i)}return this};this.incrementTo=function(a,e,c){l&&C();if(typeof e!="undefined"){e=m(e)?e*1E3:1E4;c=typeof c!="undefined"&&m(c)?c:b.pace;var d=typeof a!="undefined"&&m(a)?a-b.value:0,
-g,f,k,D,s,x=0,y={pace:0,inc:0};c=e/d>c?Math.round(e/d/10)*10:c;g=Math.floor(e/c);f=Math.round(d/g);k=Math.abs(d-g*f)+Math.abs(g*c-e);s=G(d,g,f,c,e);b.debug&&console.log("***************************************************************\nSTART: "+b.value+"\nEND: "+a+"\n"+s.str);if(d>0){for(;s.result===false&&x<100;){c+=10;g=Math.floor(e/c);f=Math.round(d/g);D=Math.abs(d-g*f)+Math.abs(g*c-e);s=G(d,g,f,c,e);if(D<k){k=D;y.pace=c;y.inc=f}b.debug&&console.log("ADJUSTMENT: "+(x+1)+"\n"+s.str);x++}if(x==100){b.inc=
-y.inc;b.pace=y.pace}else{b.inc=f;b.pace=c}A(a,true,g)}}else A(a)};this.getValue=function(){return b.value};this.stop=function(){l&&C();return this};(function(a){for(var e=a.toString().length,c=1,d=0;d<e;d++){jQuery(h).prepend('<ul class="cd" id="d'+d+'"><li class="t"></li><li class="b"></li></ul>');c!=e&&c%3==0&&jQuery(h).prepend('<ul class="cd"><li class="s"></li></ul>');c++}a=B(a.toString());for(d=0;d<e;d++){jQuery(h+" #d"+d+" li.t").css({"background-position":"0 -"+a[d]*p+"px"});jQuery(h+" #d"+
-d+" li.b").css({"background-position":"0 -"+a[d]*n+"px"})}if(b.auto===true)l=setTimeout(t,b.pace)})(b.value)};
+var flipCounter=function(w,H){function r(){j=c.value.toString();c.value+=c.inc;i=c.value.toString();n(j,i);if(c.auto===true)k=setTimeout(r,c.pace)}function x(a,e,b){var d=c.value,g=typeof e=="undefined"?false:e,f=typeof b=="undefined"?1:b;g===true&&f--;if(d!=a){j=c.value.toString();c.auto=true;if(d+c.inc<=a&&f!=0)d+=c.inc;else d=a;c.value=d;i=c.value.toString();n(j,i);k=setTimeout(function(){x(a,g,f)},c.pace)}else c.auto=false}function n(a,e){s=y(a);t=y(e);if(e.length>a.length)for(var b=e.length-
+a.length;b>0;){var d=t[e.length-b],g=Number(e.length-b+1)-1;g%3==0&&jQuery(h).prepend('<ul class="cd"><li class="s"></li></ul>');jQuery(h).prepend('<ul class="cd" id="d'+g+'"><li class="t"></li><li class="b"></li></ul>');jQuery(h+" #d"+g+" li.t").css({"background-position":"0 -"+d*o+"px"});jQuery(h+" #d"+g+" li.b").css({"background-position":"0 -"+d*m+"px"});b--}if(e.length<a.length)for(b=a.length-e.length;b>0;){jQuery(h+" #d"+(a.length-b)).remove();d=jQuery(h+" li").first();d.hasClass("s")&&d.parent("ul").remove();
+b--}for(b=0;b<s.length;b++)t[b]!=s[b]&&I(b,s[b],t[b])}function I(a,e,b){var d;if(c.auto===true&&c.pace<=300)switch(a){case 0:d=c.pace/6;break;case 1:d=c.pace/5;break;case 2:d=c.pace/4;break;case 3:d=c.pace/3;break;default:d=c.pace/2}else d=80;d=d>80?80:d;jQuery(h+" #d"+a+" li.t").delay(d).animate({"background-position":"-"+p+"px -"+e*o+"px"},0).delay(d).animate({"background-position":p*-2+"px -"+e*o+"px"},0).delay(d).animate({"background-position":"0 -"+b*o+"px"},0,function(){jQuery(h+" #d"+a+" li.b").animate({"background-position":"-"+
+p+"px -"+e*m+"px"},0).delay(d).animate({"background-position":p*-2+"px -"+b*m+"px"},0).delay(d).animate({"background-position":p*-3+"px -"+b*m+"px"},0).delay(d).animate({"background-position":"0 -"+b*m+"px"},0)})}function y(a){for(var e=[],b=0;b<a.length;b++){E=a.length-(b+1);F=a.length-b;e[b]=a.substring(E,F)}return e}function G(a,e,b,d,g){var f={result:true};f.cond1=a/e>=1?true:false;f.cond2=e*b<=a?true:false;f.cond3=Math.abs(e*b-a)<=5?true:false;f.cond4=Math.abs(e*d-g)<=100?true:false;f.cond5=
+e*d<=g?true:false;f.str="Condition Checks:\n";for(a=1;a<=5;a++){f.str+=a+": ";if(f["cond"+a]===false){f.str+="FAIL";f.result=false}else f.str+="PASS";f.str+=a<5?", ":""}return f}function l(a){return!isNaN(parseFloat(a))&&isFinite(a)}function z(){clearTimeout(k);k=null}var u={value:0,inc:1,pace:1E3,auto:true,debug:false},c=H||{},h=w&&w!=""?"#"+w:"#counter",q;for(q in u)c[q]=q in c?c[q]:u[q];var o=39,m=64,p=53,s=[],t=[],E,F,j,i,k=null;this.setValue=function(a){if(l(a)){j=c.value.toString();i=a.toString();
+c.value=a;n(j,i)}return this};this.setIncrement=function(a){c.inc=l(a)?a:u.inc;return this};this.setPace=function(a){c.pace=l(a)?a:u.pace;return this};this.setAuto=function(a){if(a&&!c.atuo){c.auto=true;r()}if(!a&&c.auto){k&&z();c.auto=false}return this};this.step=function(){c.auto||r();return this};this.add=function(a){if(l(a)){j=c.value.toString();c.value+=a;i=c.value.toString();n(j,i)}return this};this.subtract=function(a){if(l(a)){j=c.value.toString();c.value-=a;if(c.value>=0)i=c.value.toString();
+else{i="0";c.value=0}n(j,i)}return this};this.incrementTo=function(a,e,b){k&&z();if(typeof e!="undefined"){e=l(e)?e*1E3:1E4;b=typeof b!="undefined"&&l(b)?b:c.pace;var d=typeof a!="undefined"&&l(a)?a-c.value:0,g,f,A,B,C,D=0,v={pace:0,inc:0};b=e/d>b?Math.round(e/d/10)*10:b;g=Math.floor(e/b);f=Math.round(d/g);A=Math.abs(d-g*f)+Math.abs(g*b-e);C=G(d,g,f,b,e);if(d>0){for(;C.result===false&&D<100;){b+=10;g=Math.floor(e/b);f=Math.round(d/g);B=Math.abs(d-g*f)+Math.abs(g*b-e);C=G(d,g,f,b,e);if(B<A){A=B;v.pace=
+b;v.inc=f}D++}if(D==100){c.inc=v.inc;c.pace=v.pace}else{c.inc=f;c.pace=b}x(a,true,g)}}else x(a)};this.getValue=function(){return c.value};this.stop=function(){k&&z();return this};(function(a){for(var e=a.toString().length,b=1,d=0;d<e;d++){jQuery(h).prepend('<ul class="cd" id="d'+d+'"><li class="t"></li><li class="b"></li></ul>');b!=e&&b%3==0&&jQuery(h).prepend('<ul class="cd"><li class="s"></li></ul>');b++}a=y(a.toString());for(d=0;d<e;d++){jQuery(h+" #d"+d+" li.t").css({"background-position":"0 -"+
+a[d]*o+"px"});jQuery(h+" #d"+d+" li.b").css({"background-position":"0 -"+a[d]*m+"px"})}if(c.auto===true)k=setTimeout(r,c.pace)})(c.value)};