Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit e268e1e45a561edcae4e8ed66e9769a963aac497 Ken Henderson MBP committed Oct 25, 2008
@@ -0,0 +1,40 @@
+The Problem and the Solution
+ This Library Merges the jQuery ColorPicker Library (http://www.eyecon.ro/colorpicker/) with the iepngfix.htc from TwinHelix (http://www.twinhelix.com/css/iepngfix/).
+
+ The end result is a ColorPicker Library that works accross all browsers, including IE6.
+
+ The ultimate solution to this problem was not that difficult, it was achieved with 2 steps;
+ 1.) Download the IEPNGFIX package from TwinHelix, and drop the iepngfix.htc and blank.gif files into the root of the ColorPicker Library (or the root of your public folder if you are installing this in your own application).
+ 2.) Put the following lines of code in the bottom of the colorpicker.css file;
+
+ /************************
+ JS File Requires These
+ ************************/
+ .colorpicker_color div, .colorpicker_color div div { behavior: url("iepngfix.htc") }
+ /************************
+ SlideDown Demo Requires These
+ ************************/
+ #colorSelector2, #colorSelector2 div, #colorSelector2 div div { behavior: url("iepngfix.htc") }
+ /************************
+ Pop-Up Live Preview Demo Requires These
+ ************************/
+ #colorSelector, #colorSelector div { behavior: url("iepngfix.htc") }
+
+
+Better Efficiency?
+ If you want your application to be a bit more efficient, I would recommend following the steps below;
+ 1.) Add a conditional statement in the head your layout, that defines a separate CSS file for IE6. For those of you not familiar with this, the statement looks like this;
+ <!--[if IE 6]>
+ <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen, projection">
+ <![endif]-->
+
+ 2.) Create ie6.css and place it where ever your stylesheets are.
+ 3.) Remove the lines of code that I added to colorpicker.css and put them in ie6.css
+
+This will only call the iepngfix.htc file when the browser is recognized as IE6.
+
+Improvements to Come?
+ Yeah, there's a small issue of cleaning up the borders around the colorSelector divs so that they are not transparent. I'll get there. But at least for the the time being you can few the colors in those DIVs, which you couldn't do before.
+
+
+Disclaimer: My wife is a lawyer, so I'm always aware of the legal stuff. This library is provided "As Is", and I assume no responsibility for issues it may cause you. I have tested it on many browsers, but not all operating systems, and cannot guarantee that it will behave properly across all platforms. In other words, use at your own risk.....but i think the risk is pretty low :-)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,175 @@
+.colorpicker {
+ width: 356px;
+ height: 176px;
+ overflow: hidden;
+ position: absolute;
+ background: url(../images/colorpicker_background.png);
+ font-family: Arial, Helvetica, sans-serif;
+ display: none;
+}
+.colorpicker_color {
+ width: 150px;
+ height: 150px;
+ left: 14px;
+ top: 13px;
+ position: absolute;
+ background: #f00;
+ overflow: hidden;
+ cursor: crosshair;
+}
+.colorpicker_color div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
+ background: url(../images/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 11px;
+ height: 11px;
+ overflow: hidden;
+ background: url(../images/colorpicker_select.gif);
+ margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+ position: absolute;
+ top: 13px;
+ left: 171px;
+ width: 35px;
+ height: 150px;
+ cursor: n-resize;
+}
+.colorpicker_hue div {
+ position: absolute;
+ width: 35px;
+ height: 9px;
+ overflow: hidden;
+ background: url(../images/colorpicker_indic.gif) left top;
+ margin: -4px 0 0 0;
+ left: 0px;
+}
+.colorpicker_new_color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 213px;
+ top: 13px;
+ background: #f00;
+}
+.colorpicker_current_color {
+ position: absolute;
+ width: 60px;
+ height: 30px;
+ left: 283px;
+ top: 13px;
+ background: #f00;
+}
+.colorpicker input {
+ background-color: transparent;
+ border: 1px solid transparent;
+ position: absolute;
+ font-size: 10px;
+ font-family: Arial, Helvetica, sans-serif;
+ color: #898989;
+ top: 4px;
+ right: 11px;
+ text-align: right;
+ margin: 0;
+ padding: 0;
+ height: 11px;
+}
+.colorpicker_hex {
+ position: absolute;
+ width: 72px;
+ height: 22px;
+ background: url(../images/colorpicker_hex.png) top;
+ left: 212px;
+ top: 142px;
+}
+.colorpicker_hex input {
+ right: 6px;
+}
+.colorpicker_field {
+ height: 22px;
+ width: 62px;
+ background-position: top;
+ position: absolute;
+}
+.colorpicker_field span {
+ position: absolute;
+ width: 12px;
+ height: 22px;
+ overflow: hidden;
+ top: 0;
+ right: 0;
+ cursor: n-resize;
+}
+.colorpicker_rgb_r {
+ background-image: url(../images/colorpicker_rgb_r.png);
+ top: 52px;
+ left: 212px;
+}
+.colorpicker_rgb_g {
+ background-image: url(../images/colorpicker_rgb_g.png);
+ top: 82px;
+ left: 212px;
+}
+.colorpicker_rgb_b {
+ background-image: url(../images/colorpicker_rgb_b.png);
+ top: 112px;
+ left: 212px;
+}
+.colorpicker_hsb_h {
+ background-image: url(../images/colorpicker_hsb_h.png);
+ top: 52px;
+ left: 282px;
+}
+.colorpicker_hsb_s {
+ background-image: url(../images/colorpicker_hsb_s.png);
+ top: 82px;
+ left: 282px;
+}
+.colorpicker_hsb_b {
+ background-image: url(../images/colorpicker_hsb_b.png);
+ top: 112px;
+ left: 282px;
+}
+.colorpicker_submit {
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ background: url(../images/colorpicker_submit.png) top;
+ left: 322px;
+ top: 142px;
+ overflow: hidden;
+}
+.colorpicker_focus {
+ background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+ background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+ background-position: bottom;
+}
+.colorpicker_slider {
+ background-position: bottom;
+}
+
+
+/************************
+JS File Requires These
+************************/
+.colorpicker_color div, .colorpicker_color div div { behavior: url("iepngfix.htc") }
+/************************
+SlideDown Demo Requires These
+************************/
+#colorSelector2, #colorSelector2 div, #colorSelector2 div div { behavior: url("iepngfix.htc") }
+/************************
+Pop-Up Live Preview Demo Requires These
+************************/
+#colorSelector, #colorSelector div { behavior: url("iepngfix.htc") }
Oops, something went wrong.

0 comments on commit e268e1e

Please sign in to comment.