User:Koevanuda
<style type="text/css">
.dragPanel { position: relative; background-color: #eeeeee; top: 0px; left: 20px; width: 320px; height: 180px; }
.dragPanel h4 { background-color: #bbbbbb; height: 10px; margin: 0px; cursor: move; }
input { font-size: 85%} .thumb { cursor:default; width:18px; height:18px; z-index: 9; position: absolute; left: 0px; }
.bg { position:absolute; left:10px; height:18px; width:146px; border: 0px solid #aaaaaa; }
.bg span, .bg p { cursor:default; position: relative; font-size: 2px; overflow: hidden; color: #aaaaaa; top: 4px; height: 10px; width: 4px; display: block; float:left; }
.bg span { border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; }
.bg .lb { border-left:1px solid #cccccc; }
.bg .rb { border-right:1px solid #cccccc; }
#valdiv { position:absolute; top: 100px; left:10px; }
#rBG {-moz-outline: none; outline:0px none;top:30px}
#gBG {-moz-outline: none; outline:0px none;top:50px}
#bBG {-moz-outline: none; outline:0px none;top:70px}
#swatch { position:absolute; left:160px; top:34px; height:50px; width:50px; border:1px solid #aaaaaa; }
</style>
<form name="rgbform">
RGB |
<input autocomplete="off" tabindex="3" name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
<input autocomplete="off" tabindex="4" name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
<input autocomplete="off" tabindex="5" name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
|
<input tabindex="6" id="rgbSubmit" type="button" value="Update" /> |
Hex: # |
<input autocomplete="off" tabindex="7" name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" /> |
<input tabindex="8" id="hexSubmit" type="button" value="Update" /> |
<input tabindex="9" id="resetButton" type="button" value="Reset" /> |
</form>
<script type="text/javascript" src="assets/color.js"></script>
<script type="text/javascript">
YAHOO.example.RGBSlider = function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
Color = YAHOO.util.Color,
Slider = YAHOO.widget.Slider,
r, g, b, dd;
function updateSliderColors() {
var curr, curg, curb;
curr = Math.min(r.getValue() * 2, 255);
curg = Math.min(g.getValue() * 2, 255);
curb = Math.min(b.getValue() * 2, 255);
YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
for (var i=0; i<34; i++) {
Dom.setStyle("rBG" + i, "background-color",
"rgb(" + (i*8) + "," + curg + "," + curb + ")");
Dom.setStyle("gBG" + i, "background-color",
"rgb(" + curr + "," + (i*8) + "," + curb + ")");
Dom.setStyle("bBG" + i, "background-color",
"rgb(" + curr + "," + curg + "," + (i*8) + ")");
}
Dom.setStyle("swatch", "background-color",
"rgb(" + curr + "," + curg + "," + curb + ")");
Dom.get("hexval").value = Color.rgb2hex(curr, curg, curb);
}
function isValidRGB(a) {
if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
return true; }
function listenerUpdate(whichSlider, newVal) {
newVal = Math.min(255, newVal);
Dom.get(whichSlider + "val").value = newVal;
updateSliderColors();
}
return {
userReset: function() {
var v;
var f = document.forms['rgbform'];
r.setValue(0);
g.setValue(0);
b.setValue(0);
},
rgbInit: function() {
r = Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.subscribe("change", function(newVal) { listenerUpdate("r", newVal*2); });
g = Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.subscribe("change", function(newVal) { listenerUpdate("g", newVal*2); });
b = Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.subscribe("change", function(newVal) { listenerUpdate("b", newVal*2); });
this.initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
},
initColor: function() {
var ch = " ";
d = document.createElement("P");
d.className = "rb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
b.getEl().appendChild(d);
for (var i=0; i<34; i++) {
d = document.createElement("SPAN");
d.id = "rBG" + i
// d.innerHTML = ch;
r.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "gBG" + i
// d.innerHTML = ch;
g.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "bBG" + i
// d.innerHTML = ch;
b.getEl().appendChild(d);
}
d = document.createElement("P");
d.className = "lb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
b.getEl().appendChild(d);
this.userUpdate();
},
hexUpdate: function(e) {
return this.userUpdate(e, true);
},
userUpdate: function(e, isHex) {
var v;
var f = document.forms['rgbform'];
if (isHex) {
var hexval = f["hexval"].value;
// shorthand #369
if (hexval.length == 3) {
var newval = "";
for (var i=0;i<3;i++) {
var a = hexval.substr(i, 1);
newval += a + a;
}
hexval = newval;
}
YAHOO.log("hexval:" + hexval);
if (hexval.length != 6) {
alert("illegal hex code: " + hexval);
} else {
var rgb = Color.hex2rgb(hexval);
// alert(rgb.toString());
if (isValidRGB(rgb)) {
f['rval'].value = rgb[0];
f['gval'].value = rgb[1];
f['bval'].value = rgb[2];
}
}
}
// red
v = parseFloat(f['rval'].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, r: " + v);
r.setValue(Math.round(v) / 2);
v = parseFloat(f['gval'].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, g: " + g);
g.setValue(Math.round(v) / 2);
v = parseFloat(f['bval'].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, b: " + b);
b.setValue(Math.round(v) / 2);
updateSliderColors();
if (e) {
Event.stopEvent(e);
}
},
init: function() {
this.rgbInit();
Event.on("rgbForm", "submit", this.userUpdate);
Event.on("rgbSubmit", "click", this.userUpdate);
Event.on("hexSubmit", "click", this.hexUpdate, this, true);
Event.on("resetButton", "click", this.userReset);
}
};
}();
YAHOO.util.Event.onDOMReady(YAHOO.example.RGBSlider.init,
YAHOO.example.RGBSlider, true);
</script> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/calendar/assets/skins/sam/calendar.css">
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/calendar/calendar-min.js"></script> /* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0
- /
.yui-calcontainer{position:relative;float:left;_overflow:hidden}.yui-calcontainer iframe{position:absolute;border:0;margin:0;padding:0;z-index:0;width:100%;height:100%;left:0;top:0}.yui-calcontainer iframe.fixedsize{width:50em;height:50em;top:-1px;left:-1px}.yui-calcontainer.multi .groupcal{z-index:1;float:left;position:relative}.yui-calcontainer .title{position:relative;z-index:1}.yui-calcontainer .close-icon{position:absolute;z-index:1;text-indent:-10000em;overflow:hidden}.yui-calendar{position:relative}.yui-calendar .calnavleft{position:absolute;z-index:1;text-indent:-10000em;overflow:hidden}.yui-calendar .calnavright{position:absolute;z-index:1;text-indent:-10000em;overflow:hidden}.yui-calendar .calheader{position:relative;width:100%;text-align:center}.yui-calcontainer .yui-cal-nav-mask{position:absolute;z-index:2;margin:0;padding:0;width:100%;height:100%;_width:0;_height:0;left:0;top:0;display:none}.yui-calcontainer .yui-cal-nav{position:absolute;z-index:3;top:0;display:none}.yui-calcontainer .yui-cal-nav .yui-cal-nav-btn{display:-moz-inline-box;display:inline-block}.yui-calcontainer .yui-cal-nav .yui-cal-nav-btn button{display:block;*display:inline-block;*overflow:visible;border:0;background-color:transparent;cursor:pointer}.yui-calendar .calbody a:hover{background:inherit}p#clear{clear:left;padding-top:10px}.yui-skin-sam .yui-calcontainer{background-color:#f2f2f2;border:1px solid #808080;padding:10px}.yui-skin-sam .yui-calcontainer.multi{padding:0 5px 0 5px}.yui-skin-sam .yui-calcontainer.multi .groupcal{background-color:transparent;border:0;padding:10px 5px 10px 5px;margin:0}.yui-skin-sam .yui-calcontainer .title{background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;border-bottom:1px solid #ccc;font:100% sans-serif;color:#000;font-weight:bold;height:auto;padding:.4em;margin:0 -10px 10px -10px;top:0;left:0;text-align:left}.yui-skin-sam .yui-calcontainer.multi .title{margin:0 -5px 0 -5px}.yui-skin-sam .yui-calcontainer.withtitle{padding-top:0}.yui-skin-sam .yui-calcontainer .calclose{background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) no-repeat 0 -300px;width:25px;height:15px;top:.4em;right:.4em;cursor:pointer}.yui-skin-sam .yui-calendar{border-spacing:0;border-collapse:collapse;font:100% sans-serif;text-align:center;margin:0}.yui-skin-sam .yui-calendar .calhead{background:transparent;border:0;vertical-align:middle;padding:0}.yui-skin-sam .yui-calendar .calheader{background:transparent;font-weight:bold;padding:0 0 .6em 0;text-align:center}.yui-skin-sam .yui-calendar .calheader img{border:0}.yui-skin-sam .yui-calendar .calnavleft{background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) no-repeat 0 -450px;width:25px;height:15px;top:0;bottom:0;left:-10px;margin-left:.4em;cursor:pointer}.yui-skin-sam .yui-calendar .calnavright{background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) no-repeat 0 -500px;width:25px;height:15px;top:0;bottom:0;right:-10px;margin-right:.4em;cursor:pointer}.yui-skin-sam .yui-calendar .calweekdayrow{height:2em}.yui-skin-sam .yui-calendar .calweekdayrow th{padding:0;border:0}.yui-skin-sam .yui-calendar .calweekdaycell{color:#000;font-weight:bold;text-align:center;width:2em}.yui-skin-sam .yui-calendar .calfoot{background-color:#f2f2f2}.yui-skin-sam .yui-calendar .calrowhead,.yui-skin-sam .yui-calendar .calrowfoot{color:#a6a6a6;font-size:85%;font-style:normal;font-weight:normal;border:0}.yui-skin-sam .yui-calendar .calrowhead{text-align:right;padding:0 2px 0 0}.yui-skin-sam .yui-calendar .calrowfoot{text-align:left;padding:0 0 0 2px}.yui-skin-sam .yui-calendar td.calcell{border:1px solid #ccc;background:#fff;padding:1px;height:1.6em;line-height:1.6em;text-align:center;white-space:nowrap}.yui-skin-sam .yui-calendar td.calcell a{color:#06c;display:block;height:100%;text-decoration:none}.yui-skin-sam .yui-calendar td.calcell.today{background-color:#000}.yui-skin-sam .yui-calendar td.calcell.today a{background-color:#fff}.yui-skin-sam .yui-calendar td.calcell.oom{background-color:#ccc;color:#a6a6a6;cursor:default}.yui-skin-sam .yui-calendar td.calcell.oom a{color:#a6a6a6}.yui-skin-sam .yui-calendar td.calcell.selected{background-color:#fff;color:#000}.yui-skin-sam .yui-calendar td.calcell.selected a{background-color:#b3d4ff;color:#000}.yui-skin-sam .yui-calendar td.calcell.calcellhover{background-color:#426fd9;color:#fff;cursor:pointer}.yui-skin-sam .yui-calendar td.calcell.calcellhover a{background-color:#426fd9;color:#fff}.yui-skin-sam .yui-calendar td.calcell.previous{color:#e0e0e0}.yui-skin-sam .yui-calendar td.calcell.restricted{text-decoration:line-through}.yui-skin-sam .yui-calendar td.calcell.highlight1{background-color:#cf9}.yui-skin-sam .yui-calendar td.calcell.highlight2{background-color:#9cf}.yui-skin-sam .yui-calendar td.calcell.highlight3{background-color:#fcc}.yui-skin-sam .yui-calendar td.calcell.highlight4{background-color:#cf9}.yui-skin-sam .yui-calendar a.calnav{border:1px solid #f2f2f2;padding:0 4px;text-decoration:none;color:#000;zoom:1}.yui-skin-sam .yui-calendar a.calnav:hover{background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;border-color:#a0a0a0;cursor:pointer}.yui-skin-sam .yui-calcontainer .yui-cal-nav-mask{background-color:#000;opacity:.25;filter:alpha(opacity=25)}.yui-skin-sam .yui-calcontainer .yui-cal-nav{font-family:arial,helvetica,clean,sans-serif;font-size:93%;border:1px solid #808080;left:50%;margin-left:-7em;width:14em;padding:0;top:2.5em;background-color:#f2f2f2}.yui-skin-sam .yui-calcontainer.withtitle .yui-cal-nav{top:4.5em}.yui-skin-sam .yui-calcontainer.multi .yui-cal-nav{width:16em;margin-left:-8em}.yui-skin-sam .yui-calcontainer .yui-cal-nav-y,.yui-skin-sam .yui-calcontainer .yui-cal-nav-m,.yui-skin-sam .yui-calcontainer .yui-cal-nav-b{padding:5px 10px 5px 10px}.yui-skin-sam .yui-calcontainer .yui-cal-nav-b{text-align:center}.yui-skin-sam .yui-calcontainer .yui-cal-nav-e{margin-top:5px;padding:5px;background-color:#edf5ff;border-top:1px solid black;display:none}.yui-skin-sam .yui-calcontainer .yui-cal-nav label{display:block;font-weight:bold} .yui-skin-sam .yui-calcontainer .yui-cal-nav-mc{width:100%;_width:auto}.yui-skin-sam .yui-calcontainer .yui-cal-nav-y input.yui-invalid{background-color:#ffee69;border:1px solid #000}.yui-skin-sam .yui-calcontainer .yui-cal-nav-yc{width:4em}.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn{border:1px solid #808080;background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;background-color:#ccc;margin:auto .15em}.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn button{padding:0 8px;font-size:93%;line-height:2;*line-height:1.7;min-height:2em;*min-height:auto;color:#000}.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn.yui-default{border:1px solid #304369;background-color:#426fd9;background:url(http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/sprite.png) repeat-x 0 -1400px}.yui-skin-sam .yui-calcontainer .yui-cal-nav .yui-cal-nav-btn.yui-default button{color:#fff}
