Created
March 25, 2012 05:44
-
-
Save jquery404/2191576 to your computer and use it in GitHub Desktop.
Progressbar with BG-hack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
// bgImgPos hack | |
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8 | |
var oldCurCSS = $.curCSS; | |
$.curCSS = function(elem, name, force){ | |
if(name === 'background-position'){ | |
name = 'backgroundPosition'; | |
} | |
if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ | |
return oldCurCSS.apply(this, arguments); | |
} | |
var style = elem.style; | |
if ( !force && style && style[ name ] ){ | |
return style[ name ]; | |
} | |
return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force); | |
}; | |
} | |
var oldAnim = $.fn.animate; | |
$.fn.animate = function(prop){ | |
if('background-position' in prop){ | |
prop.backgroundPosition = prop['background-position']; | |
delete prop['background-position']; | |
} | |
if('backgroundPosition' in prop){ | |
prop.backgroundPosition = '('+ prop.backgroundPosition; | |
} | |
return oldAnim.apply(this, arguments); | |
}; | |
function toArray(strg){ | |
strg = strg.replace(/left|top/g,'0px'); | |
strg = strg.replace(/right|bottom/g,'100%'); | |
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2"); | |
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); | |
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; | |
} | |
$.fx.step. backgroundPosition = function(fx) { | |
if (!fx.bgPosReady) { | |
var start = $.curCSS(fx.elem,'backgroundPosition'); | |
if(!start){//FF2 no inline-style fallback | |
start = '0px 0px'; | |
} | |
start = toArray(start); | |
fx.start = [start[0],start[2]]; | |
var end = toArray(fx.end); | |
fx.end = [end[0],end[2]]; | |
fx.unit = [end[1],end[3]]; | |
fx.bgPosReady = true; | |
} | |
//return; | |
var nowPosX = []; | |
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; | |
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; | |
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; | |
}; | |
// end bgImgPos hack | |
$.fn.progressBar= function(e){ | |
var eu = (e.imgurl == undefined) ? 'progressbar.png' : e.imgurl; // image url | |
var ep = (e.progress == undefined) ? 0 : e.progress; // progress value | |
var el = (e.label == undefined) ? true : e.label; // label display | |
var et = (e.type == undefined) ? '%' : e.type; // progressbar type | |
var iw = 400; // image width | |
var lp =$(this).css('backgroundPosition'); // last position | |
var cw = $(this).width(); // current width | |
var go = cw*(ep/100); // value to go | |
iw=(-1 * iw)+ 'px'; | |
if(ep<=100){ | |
$(this) | |
.css({'background-image' : 'url('+eu+')', backgroundPosition: lp}) | |
.animate({'background-position': (go+parseInt(iw))+'px 0px'},1000, function(){if(el==true)$('label', this).html(ep+et);}) | |
.animate({backgroundPosition: (go+parseInt(iw))+'px 0px'},1000); | |
} | |
}; | |
})(jQuery); | |
// @ we are using it | |
$('#prog').progressBar({ | |
imgurl : 'progressblue.png', | |
progress : 50, | |
type : '%', | |
label : true | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment