Added gradient prefixes for old browsers

Prefixes were added for the hue bar and color selection gradients: -ms, -webkit, -moz, -o.
josedvq · Mar 20, 2014 · 7cba888 · 7cba888
1 parent 46fedc1
commit 7cba888
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/colpick.jquery.json b/colpick.jquery.json
@@ -3,7 +3,7 @@
 	"title": "colpick Color Picker",
 	"description": "Simple lightweight Photoshop-like color picker, now with touch support",
 	"keywords": ["color","picker","colorpicker","choser","selector","form","jquery","input"],
-	"version": "2.0.1",
+	"version": "2.0.2",
 	"author": {"name": "Jose Vargas","email": "josedvq@gmail.com", "url": "http://codeitdown.com"},
 	"maintainers": [{"name": "Jose Vargas","email": "josedvq@gmail.com", "url": "http://codeitdown.com"}],
 	"licenses": [{"type": "GPLv2", "url": "https://github.com/josedvq/colpick-jQuery-Color-Picker/blob/master/LICENSE"}],

diff --git a/css/colpick.css b/css/colpick.css
@@ -23,7 +23,7 @@ colpick Color Picker / colpick.com
 	-o-user-select: none;
 	user-select: none;
 }
-/*Color selection box*/
+/*Color selection box with gradients*/
 .colpick_color {
 	position: absolute;
 	left: 7px;
@@ -40,19 +40,29 @@ colpick Color Picker / colpick.com
 	top:0;
 	width: 156px;
 	height: 156px;
-	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
-	background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
+	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
 }
 .colpick_color_overlay2 {
 	position: absolute;
 	left:0;
 	top:0;
 	width: 156px;
 	height: 156px;
-	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000'); /* IE6 & IE7 */
 	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
-	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
+	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 }
 /*Circular color selector*/
 .colpick_selector_outer {

diff --git a/js/colpick.js b/js/colpick.js
@@ -357,7 +357,7 @@ For usage and examples: colpick.com/plugin
 							}
 						} else {
 							stopList = stops.join(',');
-							huebar.attr('style','background:-webkit-linear-gradient(top center,'+stopList+'); background:-moz-linear-gradient(top center,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
+							huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
 						}
 						cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
 						options.newColor = cal.find('div.colpick_new_color');