Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*
* jquery.xgradient.js
* http://blog.mach3.jp/
*
* Publish Date : 2010/5/13
* Requirement : jQuery 1.4 or later
* http://jquery.com/
*
* Copyright 2010, Mach3
*/
$.fn.xgradient = function(_dir,_from,_to){
this.getColor = function(_hex){
return {
a: parseInt(_hex.substr(0,2),16)/255,
r: parseInt(_hex.substr(2,2),16),
g: parseInt(_hex.substr(4,2),16),
b: parseInt(_hex.substr(6,2),16)
};
};
this.config = {
dir:_dir,
from:_from,
to:_to
};
var _this = this;
this.each( function(){
var from = _this.getColor(_this.config.from.replace("#",""));
var to = _this.getColor(_this.config.to.replace("#",""));
if ( $.browser.mozilla ){
$(this).css("background",
String("-moz-linear-gradient(%dir%,%from%,%to%)")
.replace(/%dir%/, ((_this.config.dir=="y") ? "top" : "left"))
.replace(/%from%/, "rgba("+from.r+","+from.g+","+from.b+","+from.a+")")
.replace(/%to%/, "rgba("+to.r+","+to.g+","+to.b+","+to.a+")")
);
} else if ( $.browser.webkit ){
$(this).css("background",
String("-webkit-gradient(linear,left top,%end%,from(%from%),to(%to%))")
.replace(/%end%/, (_this.config.dir=="y") ? "left bottom" :"right top" )
.replace(/%from%/, "rgba("+from.r+","+from.g+","+from.b+","+from.a+")")
.replace(/%to%/, "rgba("+to.r+","+to.g+","+to.b+","+to.a+")")
);
} else if ( $.browser.msie ){
$(this).css("filter", String("progid:DXImageTransform.Microsoft.Gradient(GradientType=%dir%,StartColorStr=%from%,EndColorStr=%to%);")
.replace(/%dir%/, (_this.config.dir=="y") ? 0 : 1 )
.replace(/%from%/, _this.config.from)
.replace(/%to%/, _this.config.to)
);
}
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.