BVB Source Codes

Pcook CMS bubble guest v3.0 SDCMS version Show color_picker_fg.htm Source code

Return Download Pcook CMS bubble guest v3.0 SDCMS version: download color_picker_fg.htm Source code - Download Pcook CMS bubble guest v3.0 SDCMS version Source code - Type:.htm
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <link href="../style/editor.css" rel="stylesheet" type="text/css">
  5. <script>
  6.   var sLangDir=window.opener.oUtil.langDir;
  7.   document.write("<scr"+"ipt src='../language/"+sLangDir+"/color.js'></scr"+"ipt>");
  8. </script>
  9. <script>writeTitle()</script>
  10. <script>
  11. //******* COLOR ARRAY *********
  12. var dialogArg=window.opener;
  13. var sName=window.location.search.substr(1);//color object name
  14. var arrColCustoms = eval("dialogArg."+sName).customColors;
  15.  
  16. //******* REAL TIME (CUSTOM) *********
  17. function doWindowFocus()
  18.     {
  19.     dialogArg.oUtil.onSelectionChanged=new Function("realTime()");
  20.     }
  21.    
  22. function bodyOnLoad()
  23.     {  
  24.     window.onfocus=doWindowFocus;  
  25.     dialogArg.oUtil.onSelectionChanged=new Function("realTime()");
  26.     realTime()
  27.     }
  28.    
  29. function realTime()
  30.     {
  31.     var oEditor=dialogArg.oUtil.oEditor;
  32.     if(oEditor.document.queryCommandEnabled("ForeColor"))
  33.         {
  34.         if(oEditor.document.queryCommandValue("ForeColor")!=null)
  35.             {
  36.             var idCurrent = document.getElementById("idCurrent")
  37.             sHex=extractRGBColor(oEditor.document.queryCommandValue("ForeColor"));
  38.             idCurrent.style.backgroundColor="#" + sHex;
  39.  
  40.             nRed=convertHexToDec(idCurrent.style.backgroundColor.substr(1,2));
  41.             nGreen=convertHexToDec(idCurrent.style.backgroundColor.substr(3,2));
  42.             nBlue=convertHexToDec(idCurrent.style.backgroundColor.substr(5,2));
  43.             if(idCurrent.style.backgroundColor=="")
  44.                 {
  45.                 nRed="";nGreen="";nBlue="";
  46.                 }
  47.             idCurrent.title = "Red: "+nRed+"\nGreen: "+nGreen+"\nBlue: "+nBlue+"\nHex: "+idCurrent.style.backgroundColor;
  48.             }
  49.         }
  50.     }
  51.  
  52. //******* APPLY COLOR (CUSTOM) *********
  53. function doApply()
  54.     {
  55.     var oEditor=dialogArg.oUtil.oEditor;
  56.     //var oSel=oEditor.document.selection.createRange();
  57.    
  58.     dialogArg.oUtil.obj.saveForUndo();
  59.    
  60.     var inpHex = document.getElementById("inpHex");
  61.     var chkUseColorName = document.getElementById("chkUseColorName");
  62.     var idColorName = document.getElementById("idColorName");
  63.    
  64.     if(chkUseColorName.checked && idColorName.innerHTML!="")
  65.        oEditor.document.execCommand("ForeColor",false, idColorName.innerHTML);
  66.     else
  67.         oEditor.document.execCommand("ForeColor",false,inpHex.value);
  68.  
  69.     dialogArg.realTime(dialogArg.oUtil.obj);
  70.     //dialogArg.oUtil.obj.selectElement(0);
  71.     window.focus();
  72.     }
  73.    
  74. function doRemove()
  75.     {
  76.     var oEditor=dialogArg.oUtil.oEditor;
  77.     //var oSel=oEditor.document.selection.createRange();
  78.    
  79.     dialogArg.oUtil.obj.saveForUndo();
  80.    
  81.     //oSel.execCommand("ForeColor",false,"transparent");
  82.     //oEditor.document.execCommand("ForeColor",false,"");
  83.     dialogArg.oUtil.obj.applyColor("ForeColor","");
  84.    
  85.     dialogArg.realTime(dialogArg.oUtil.obj);
  86.     //dialogArg.oUtil.obj.selectElement(0);
  87.     }
  88.  
  89. //******* REFRESH CUSTOM COLOR (CUSTOM) *********
  90. function applyCustomColor()
  91.     {
  92.     for(var i=0;i<22;i++)
  93.        {
  94.        var cellCustom=document.getElementById("cellCustom"+i)
  95.        if(cellCustom.style.backgroundColor!="transparent")
  96.            arrColCustoms[i]=cellCustom.style.backgroundColor;
  97.        }
  98.    dialogArg.oUtil.obj.customColors=arrColCustoms;//CUSTOM (apply to public definition)
  99.    eval("dialogArg."+sName).refreshCustomColor();//spy kalo msh show lgs ter-apply
  100.    }
  101.  
  102. //******* TABS *********
  103. var oActiveTab;
  104. function tabClick(n)
  105.    {
  106.    
  107.    var idWebPallete = document.getElementById("idWebPallete");
  108.    var idNamedColors = document.getElementById("idNamedColors");
  109.    var idWebSafe = document.getElementById("idWebSafe");
  110.    
  111.    if(!oActiveTab) oActiveTab=document.getElementById("tab0");
  112.    var oEl=document.getElementById("tab"+n);
  113.    if(oActiveTab==oEl)return;
  114.    oEl.style.cssText="font-weight:bold;font-size:11px;color:gray;padding:5px;padding-left:7px;padding-right:7px;cursor:default;border:#e0e0e0 2px solid;border-bottom:#FCFCFC 2px solid;background:#FCFCFC";
  115.    oActiveTab.style.cssText="font-weight:bold;font-size:11px;color:gray;padding:5px;padding-left:7px;padding-right:7px;cursor:pointer;border:#e0e0e0 2px solid;"
  116.    oActiveTab=oEl;
  117.    
  118.    if(n==0)
  119.        {
  120.        idWebPallete.style.display="block";
  121.        idNamedColors.style.display="none";
  122.        idWebSafe.style.display="none";
  123.        }
  124.    if(n==1)
  125.        {
  126.        idWebPallete.style.display="none";
  127.        idNamedColors.style.display="block";
  128.        idWebSafe.style.display="none";
  129.        }
  130.    if(n==2)
  131.        {
  132.        idWebPallete.style.display="none";
  133.        idNamedColors.style.display="none";
  134.        idWebSafe.style.display="block";
  135.        }
  136.    }
  137.  
  138. //******* UTILITY *********
  139. function updateHex()
  140.    {
  141.  
  142.    var inpHex = document.getElementById("inpHex");
  143.    var inpRed = document.getElementById("inpRed");
  144.    var inpGreen = document.getElementById("inpGreen");
  145.    var inpBlue = document.getElementById("inpBlue");
  146.    var idPreview = document.getElementById("idPreview");
  147.    var idColorName = document.getElementById("idColorName");
  148.    
  149.    if(inpRed.value==""||inpGreen.value==""||inpBlue.value=="")
  150.        {
  151.        idPreview.style.backgroundColor="";
  152.        inpHex.value="";
  153.        return;
  154.        }
  155.    try
  156.        {
  157.        inpHex.value=""+
  158.            convertDecToHex(inpRed.value)+
  159.            convertDecToHex(inpGreen.value)+
  160.            convertDecToHex(inpBlue.value);
  161.        idPreview.style.backgroundColor=inpHex.value;
  162.        idColorName.innerHTML="";
  163.        }
  164.    catch(e){;}
  165.    }
  166. function updateRGB()
  167.    {
  168.    
  169.    var inpHex = document.getElementById("inpHex");
  170.    var inpRed = document.getElementById("inpRed");
  171.    var inpGreen = document.getElementById("inpGreen");
  172.    var inpBlue = document.getElementById("inpBlue");
  173.    var idPreview = document.getElementById("idPreview");
  174.    var idColorName = document.getElementById("idColorName");
  175.    
  176.    if(inpHex.value=="")
  177.        {
  178.        inpRed.value="";
  179.        inpGreen.value="";
  180.        inpBlue.value="";
  181.        return;
  182.        }
  183.    try
  184.        {
  185.        idPreview.style.backgroundColor=inpHex.value;
  186.        inpRed.value=convertHexToDec(inpHex.value.substr(0,2));
  187.        inpGreen.value=convertHexToDec(inpHex.value.substr(2,2));
  188.        inpBlue.value=convertHexToDec(inpHex.value.substr(4,2));
  189.        idColorName.innerHTML="";
  190.        }
  191.    catch(e){;}
  192.    }
  193.    
  194. function convertHexToDec(hex)
  195.    {
  196.    return parseInt(hex,16);
  197.    }
  198.    
  199. function convertDecToHex(dec)
  200.    {
  201.    var tmp = parseInt(dec).toString(16);
  202.    if(tmp.length == 1) tmp = ("0" +tmp);
  203.    return tmp;//.toUpperCase();
  204.    }
  205.    
  206. function convertDecToHex2(dec)
  207.    {
  208.    var tmp = parseInt(dec).toString(16);
  209.  
  210.    if(tmp.length == 1) tmp = ("00000" +tmp);
  211.    if(tmp.length == 2) tmp = ("0000" +tmp);
  212.    if(tmp.length == 3) tmp = ("000" +tmp);
  213.    if(tmp.length == 4) tmp = ("00" +tmp);
  214.    if(tmp.length == 5) tmp = ("0" +tmp);
  215.  
  216.    tmp = tmp.substr(4,1) + tmp.substr(5,1) + tmp.substr(2,1) + tmp.substr(3,1) + tmp.substr(0,1) + tmp.substr(1,1)
  217.    return tmp;//.toUpperCase();
  218.    }
  219.    
  220. //input color in format rgb(R,G,B)
  221. //ex, return by document.queryCommandValue(forcolor)
  222. function extractRGBColor(col) {
  223.    var re = /rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)/i;
  224.    if (re.test(col)) {
  225.        var result = re.exec(col);
  226.        return convertDecToHex(parseInt(result[1])) +
  227.               convertDecToHex(parseInt(result[2])) +
  228.               convertDecToHex(parseInt(result[3]));
  229.    }
  230.    return convertDecToHex2(0);
  231. }
  232.  
  233. //******* INIT *********
  234. function init()
  235.    {
  236.    var sHTML="";  
  237.    
  238.    //******* Web Pallete *********
  239.    var arrColors=[
  240.            ["#ef001b","#cc0017","#a60012","#83000e","#5c000a","#ef0078","#ce0067","#ad0057","#8b0045","#6a0035","#e301ed","#c501ce","#a401ab","#88018e","#610066","#6716ef","#5913ce","#4b10af","#3e0d90","#2d0a6a"],
  241.            ["#f13449","#d52437","#bb1d2e","#980b1a","#70000c","#f32a8f","#d5207a","#b21162","#970c51","#710039","#e624ef","#cc20d4","#ad10b4","#900995","#6f0374","#7b38ed","#6c2fd2","#5c27b5","#471a94","#391379"],
  242.            ["#f67684","#e36875","#ca5965","#b34e59","#933c45","#f563ac","#de599b","#cc5490","#b24d7f","#96416c","#ee68f4","#db5fe1","#c759cc","#b255b6","#964799","#a779f5","#976cdf","#8d68cc","#7f5eb7","#6f539c"],
  243.            ["#fcc0c6","#eea8af","#dd959c","#ce8c93","#bc858b","#fec7e2","#f4b8d6","#e5a6c6","#d495b4","#bb85a0","#fabffd","#eeaff1","#e19fe4","#cf90d2","#b985bb","#e0c3fd","#d1b1f1","#c1a0e2","#b192d1","#a489c0"],
  244.            ["#fef5f6","#fdeced","#f7dee0","#eacedc","#dec1d0","#fef3f8","#fbe8f1","#efd0e0","#e6c7d6","#d9b8c8","#fef2fe","#fae6fb","#f1d3f2","#e3c1e4","#d8bad9","#f5edfe","#f0e5fb","#e1d3ef","#d9cbe7","#cdbfdc"],
  245.            ["#028b6c","#02775d","#02644e","#015441","#013b2e","#1882ed","#1574d4","#115eab","#0e4f90","#0a3764","#0040eb","#0039d0","#0030b1","#002892","#001b64","#50509e","#46468b","#3a3a73","#303060","#222245"],
  246.            ["#279980","#1c856e","#15705b","#0b5b49","#054637","#3c95ee","#3283d5","#286fb8","#1b5997","#0c3e71","#2a61f3","#1d4ed3","#1640b2","#113699","#022072","#6d6db0","#5d5d99","#4c4c82","#373763","#29294d"],
  247.            ["#69baa7","#61a898","#57998a","#508b7d","#47776c","#7bb8f5","#6ea7e0","#6195c9","#5684b2","#4c7298","#6d92f5","#5f82e0","#5675c9","#4d68b2","#495f9a","#9b9bc9","#8b8bb6","#7e7ea5","#747496","#5f5f7a"],
  248.            ["#d0eae4","#b3d7cf","#9bc4ba","#8fb4ac","#86a49d","#c3dffc","#aacdf0","#9bbde0","#97b4d1","#94acc4","#bdcdfb","#a8bbef","#96aae1","#8a9bcb","#8393c0","#d8d8eb","#c7c7dc","#b5b5cc","#a5a5bc","#9898ac"],
  249.            ["#f0f8f6","#deedea","#d7e6e2","#ceddda","#c8d6d2","#f1f7fe","#e5f0fb","#d8e5f2","#cfdbe7","#c3cfda","#eff3fe","#e5eafa","#dde3f4","#d2d8ea","#c3cadd","#f4f4f9","#e5e5ef","#dbdbe5","#d6d6df","#d1d1d9"],
  250.            ["#00a000","#008d00","#007700","#006000","#004500","#86d800","#73ba00","#629e00","#528400","#395c00","#eded00","#cece00","#afaf00","#909000","#737300","#e3ab00","#c79600","#aa8000","#856400","#604800"],
  251.            ["#27b127","#229c22","#1b881b","#0f6e0f","#085408","#96dc24","#84c220","#6ea515","#5c8b0f","#3f6600","#f1f12c","#d3d31b","#b2b211","#959509","#747403","#e8b827","#cda220","#b18a15","#8c6c0a","#6e5300"],
  252.            ["#68c868","#5cb65c","#56a456","#4b924b","#488248","#b7e768","#a8d45f","#97c056","#86aa4d","#718e41","#f1f164","#e1e15d","#caca58","#b2b24d","#979746","#eecc65","#dabc5e","#c7ac59","#b09850","#948044"],
  253.            ["#c6ecc6","#addead","#96cd96","#87b987","#87b087","#e1f6c0","#d0eba6","#c1d99a","#b1c88c","#a4b786","#fbfbad","#f1f194","#e2e28e","#cece8c","#b9b982","#faeaba","#f2dfa7","#e6d090","#cbbb8b","#b6a778"],
  254.            ["#eef9ee","#dff1df","#d5e8d5","#c6dbc6","#bed1be","#f1fbe2","#e9f5d5","#dfebcd","#d4e1c0","#c9d5b6","#fefef0","#fafae3","#f0f0cb","#e4e4c5","#dadaba","#fdf8ea","#f9f2de","#eee4c7","#dfd7bf","#d6cfb7"],
  255.            ["#818181","#676767","#494949","#272727","#000000","#783c00","#673300","#562b00","#472300","#341a00","#eb4600","#cd3d00","#ad3300","#8f2a00","#671e00","#ed7700","#d26900","#af5800","#904800","#643200"],
  256.            ["#989898","#838383","#646464","#515151","#2f2f2f","#8c5927","#7c4f23","#673f19","#583616","#402408","#eb5f26","#d1521e","#b34315","#95330a","#702303","#f08c28","#d47a20","#b96816","#954f09","#713902"],
  257.            ["#c9c9c9","#a9a9a9","#919191","#787878","#565656","#af8b68","#a28264","#917458","#856d55","#715c49","#f19068","#dd8561","#c97654","#b47053","#985d45","#f5ac63","#e1a05f","#ca9259","#b78451","#966b41"],
  258.            ["#efefef","#dcdcdc","#c1c1c1","#9d9d9d","#828282","#dbcab9","#ccb8a5","#bda792","#a3917f","#9a8979","#fbcebc","#f1bba5","#e1aa93","#ce9f8b","#b18b7b","#fcd7b3","#f3caa2","#e7b98c","#c8a078","#b29171"],
  259.            ["#ffffff","#f7f7f7","#ededed","#dddddd","#c9c9c9","#f4efeb","#efe8e1","#e6ded6","#dbd3cc","#d0c9c2","#fef5f2","#fae8e1","#f0dbd3","#e1cbc2","#d6beb5","#fef7f0","#faecde","#f1e2d3","#e3d3c3","#dacaba"]  
  260.            ]
  261.    
  262.    sHTML+="<table cellpadding=0 cellspacing=0 border=0 style=\"border-collapse:collapse\">";
  263.     for(var i=0;i<arrColors.length;i++)
  264.        {
  265.        sHTML+="<tr>";
  266.         for(var j=0;j<arrColors[i].length;j++)
  267.            {
  268.            sHTML+="<td id=\"cell"+i+j+"\" onclick=\"setColor(this)\" style=\"cursor:pointer;width:17px;height:12px;background:"+arrColors[i][j]+"\"></td>";
  269.             }
  270.         sHTML+="</tr>";    
  271.         }
  272.     sHTML+="</table>";
  273.    
  274.     document.getElementById("idWebPallete").innerHTML=sHTML;  
  275.    
  276.     //******* 22 Custom Colors *********    
  277.     sHTML="<table cellpadding=0 cellspacing=0 border=0>";
  278.     sHTML+="<tr>";
  279.     for(var i=0;i<22;i++)
  280.        {
  281.        sHTML+="<td style='border:white 1px solid;padding:1px'>";
  282.         if(i<arrColCustoms.length)
  283.            sHTML+="<table cellpadding=0 cellspacing=0 id=\"cellCustom"+i+"\" onclick=\"setCustomColor(this)\" style=\"cursor:pointer;width:12px;height:12px;background:"+arrColCustoms[i]+"\"><tr><td></td></tr></table>";
  284.         else
  285.             sHTML+="<table cellpadding=0 cellspacing=0 id=\"cellCustom"+i+"\" onclick=\"setCustomColor(this)\" style=\"width:12px;height:12px;background-color:transparent\"><tr><td></td></tr></table>";
  286.         sHTML+="</td>";
  287.         }
  288.     sHTML+="</tr>";
  289.     sHTML+="</table>";
  290.    
  291.     document.getElementById("idColorCustom").innerHTML=sHTML;  
  292.    
  293.     //******* Named Colors *********
  294.     var arrNamedColors=[
  295.                 ["#000000","#800000","#ff0000","#8b4513","#d2b48c","#b8860b","#556b2f","#006400","#2e8b57","#2f4f4f","#5f9ea0","#191970","#483d8b","#4b0082","#800080","#dc143c"],
  296.                 ["#696969","#8b0000","#ff4500","#a0522d","#deb887","#daa520","#6b8e23","#008000","#3cb371","#008080","#00ced1","#000080","#4682b4","#8a2be2","#8b008b","#c71585"],
  297.                 ["#808080","#a52a2a","#ff6347","#d2691e","#f5deb3","#bdb76b","#808000","#228b22","#8fbc8f","#008b8b","#00bfff","#00008b","#708090","#9932cc","#da70d6","#db7093"],
  298.                 ["#a9a9a9","#b22222","#ff7f50","#cd853f","#ffdead","#f0e68c","#9acd32","#32cd32","#66cdaa","#20b2aa","#87cefa","#0000cd","#778899","#9400d3","#ee82ee","#ff1493"],
  299.                 ["#c0c0c0","#cd5c5c","#ff8c00","#bc8f8f","#ffe4b5","#eee8aa","#ffd700","#00ff00","#00ff7f","#48d1cc","#87ceeb","#0000ff","#6a5acd","#ba55d3","#ff00ff","#ff69b4"],
  300.                 ["#d3d3d3","#f08080","#f4a460","#e9967a","#ffebcd","#fffacd","#ffff00","#7cfc00","#00fa9a","#40e0d0","#add8e6","#4169e1","#7b68ee","#dda0dd","#ff00ff","#ffb6c1"],
  301.                 ["#dcdcdc","#fa8072","#ffa500","#ffe4e1","#ffefd5","#fff8dc","#fafad2","#7fff00","#90ee90","#00ffff","#b0e0e6","#1e90ff","#9370db","#d8bfd8","#e6e6fa","#ffc0cb"],
  302.                 ["#f5f5f5","#ffa07a","#ffdab9","#faebd7","#fdf5e6","#fffaf0","#ffffe0","#adff2f","#98fb98","#00ffff","#afeeee","#6495ed","#b0c4de","#f0ffff","#f8f8ff","#fff0f5"],
  303.                 ["#fffafa","#ffffff","#ffe4c4","#fff5ee","#faf0e6","#fffff0","#f5f5dc","#f5fffa","#f0fff0","#7fffd4","#e0ffff","#f0f8ff","","","",""]
  304.                 ]
  305.     var arrNamedColors2=[
  306.                 ["Black","Maroon","Red","SaddleBrown","Tan","DarkGoldenrod","DarkOliveGreen","DarkGreen","SeaGreen","DarkSlateGray","CadetBlue","MidnightBlue","DarkSlateBlue","Indigo","Purple","Crimson"],
  307.                 ["DimGray","DarkRed","OrangeRed","Sienna","Burlywood","Goldenrod","OliveDrab","Green","MediumSeaGreen","Teal","DarkTurquoise","Navy","SteelBlue","BlueViolet","DarkMagenta","MediumVioletRed"],
  308.                 ["Gray","Brown","Tomato","Chocolate","Wheat","DarkKhaki","Olive","ForestGreen","DarkSeaGreen","DarkCyan","DeepSkyBlue","DarkBlue","SlateGray","DarkOrchid","Orchid","PaleVioletRed"],
  309.                 ["DarkGray","FireBrick","Coral","Peru","NavajoWhite","Khaki","YellowGreen","LimeGreen","MediumAquamarine","LightSeaGreen","LightSkyBlue","MediumBlue","LightSlateGray","DarkViolet","Violet","DeepPink"],
  310.                 ["Silver","IndianRed","DarkOrange","RosyBrown","Moccasin","PaleGoldenrod","Gold","Lime","SpringGreen","MediumTurquoise","SkyBlue","Blue","SlateBlue","MediumOrchid","Fuchsia","HotPink"],
  311.                 ["LightGrey","LightCoral","SandyBrown","DarkSalmon","BlanchedAlmond","LemonChiffon","Yellow","LawnGreen","MediumSpringGreen","Turquoise","LightBlue","RoyalBlue","MediumSlateBlue","Plum","Fuchsia","LightPink"],
  312.                 ["Gainsboro","Salmon","Orange","MistyRose","PapayaWhip","Cornsilk","LightGoldenrodYellow","Chartreuse","LightGreen","Aqua","PowderBlue","DodgerBlue","MediumPurple","Thistle","Lavender","Pink"],
  313.                 ["WhiteSmoke","LightSalmon","PeachPuff","AntiqueWhite","Oldlace","FloralWhite","LightYellow","GreenYellow","PaleGreen","Aqua","PaleTurquoise","CornflowerBlue","LightSteelBlue","Azure","GhostWhite","LavenderBlush"],
  314.                 ["Snow","White","Bisque","Seashell","Linen","Ivory","Beige","MintCream","Honeydew","Aquamarine","LightCyan","AliceBlue","","","",""]
  315.                 ]
  316.  
  317.     sHTML="<table align=center cellpadding=0 cellspacing=0 style=\"border-collapse:collapse\">";
  318.     for(var i=0;i<arrNamedColors.length;i++)
  319.        {
  320.        sHTML+="<tr>";
  321.         for(var j=0;j<arrNamedColors[i].length;j++)
  322.            {
  323.            if(arrNamedColors[i][j]=="")
  324.                sHTML+="<td></td>"
  325.             else
  326.                 sHTML+="<td id=\"cellNamed"+i+j+"\" onclick=\"setColor2(this,'"+arrNamedColors2[i][j]+"')\" style=\"cursor:pointer;width:22px;height:20px;background:"+arrNamedColors[i][j]+";border:white 5px solid;\"></td>";
  327.             }
  328.         sHTML+="</tr>";    
  329.         }
  330.     sHTML+="</table>";
  331.    
  332.     sHTML+="<table width=100% cellpadding=0 cellspacing=0>";
  333.     sHTML+="<tr><td align=right>"+getTxt("Use Color Name")+" <input type=checkbox name=chkUseColorName id=chkUseColorName onclick=useColorName()><br>";
  334.     sHTML+="<span id=idColorName style='font-weight:bold;padding-right:2px;display:none'></span>";
  335.     sHTML+="</td></tr></table>";
  336.    
  337.     document.getElementById("idNamedColors").innerHTML=sHTML;  
  338.    
  339.     //******* Safe Colors *********
  340.     show()
  341.     }
  342.  
  343. //******* SET COLOR *********
  344. function setColor(oEl)
  345.     {
  346.     document.getElementById("inpHex").value= extractRGBColor(oEl.style.backgroundColor);
  347.     updateRGB();//sekaligus preview
  348.    
  349.     document.getElementById("idColorName").innerHTML="";
  350.     }
  351.  
  352. function setColor2(oEl,sColorName)
  353.     {
  354.     document.getElementById("inpHex").value= extractRGBColor(oEl.style.backgroundColor);
  355.     updateRGB();//sekaligus preview
  356.    
  357.     var idColorName = document.getElementById("idColorName");
  358.     idColorName.innerHTML=sColorName;
  359.    
  360.     var chkUseColorName = document.getElementById("chkUseColorName");
  361.     if(chkUseColorName.checked)
  362.         idColorName.style.display="block";
  363.     else
  364.         idColorName.style.display="none";
  365.     }
  366.    
  367. function useColorName()
  368.     {
  369.     var chkUseColorName = document.getElementById("chkUseColorName");
  370.     var idColorName = document.getElementById("idColorName");
  371.     if(chkUseColorName.checked)
  372.         idColorName.style.display="block";
  373.     else
  374.         idColorName.style.display="none";
  375.     }
  376.  
  377. //******* CUSTOM COLORS *********
  378. var oActiveCustomColor;
  379. var iActiveCustomColor=arrColCustoms.length;
  380. function setCustomColor(oEl)
  381.     {
  382.     if(oEl.style.backgroundColor=="transparent")return;
  383.    
  384.     //toggle:
  385.    
  386.     if(oEl.parentNode.style.border=="gray 1px solid")
  387.         {
  388.         oEl.parentNode.style.border= "white 1px solid";
  389.         oActiveCustomColor=null;
  390.         return;
  391.         }
  392.    
  393.     if(oActiveCustomColor)oActiveCustomColor.parentNode.style.border="white 1px solid";
  394.     oEl.parentNode.style.border="gray 1px solid";
  395.     oActiveCustomColor=oEl
  396.     setColor(oEl)
  397.     }
  398.    
  399. function addToCustomColors()
  400.     {
  401.     var idPreview = document.getElementById("idPreview");
  402.     if(oActiveCustomColor)
  403.         oActiveCustomColor.style.backgroundColor=idPreview.style.backgroundColor;
  404.     else
  405.         {
  406.         if(iActiveCustomColor==22)iActiveCustomColor=0;
  407.         var cellCustom=document.getElementById("cellCustom"+iActiveCustomColor)
  408.         cellCustom.style.backgroundColor=idPreview.style.backgroundColor;
  409.         cellCustom.style.cursor="pointer";
  410.         iActiveCustomColor++;
  411.         }
  412.     }
  413.  
  414. //******* WEB SAFE COMPOSITION *********
  415. function show()
  416.     {
  417.     nTopInt=15;
  418.     nLeftInt=15;
  419.     nTopInt2=18;
  420.     nLeftInt2=39;
  421.     nTop=120;
  422.     nLeft=180;
  423.    
  424.     var sHTML="";
  425.  
  426.     sHTML+=drawPlate("00FF",nLeft+(5*nLeftInt),nTop+(-5*nTopInt),"11");
  427.  
  428.     sHTML+=drawPlate("00CC",nLeft+(4*nLeftInt),nTop+(-4*nTopInt),"10");
  429.     sHTML+=drawPlate("33FF",nLeft+(4*nLeftInt)+(1*nLeftInt2),nTop+(-4*nTopInt)+(1*nTopInt2),"");    
  430.  
  431.     sHTML+=drawPlate("0099",nLeft+(3*nLeftInt),nTop+(-3*nTopInt),"9");
  432.     sHTML+=drawPlate("33CC",nLeft+(3*nLeftInt)+(1*nLeftInt2),nTop+(-3*nTopInt)+(1*nTopInt2),"");
  433.     sHTML+=drawPlate("66FF",nLeft+(3*nLeftInt)+(2*nLeftInt2),nTop+(-3*nTopInt)+(2*nTopInt2),"");
  434.  
  435.     sHTML+=drawPlate("0066",nLeft+(2*nLeftInt),nTop+(-2*nTopInt),"8");
  436.     sHTML+=drawPlate("3399",nLeft+(2*nLeftInt)+(1*nLeftInt2),nTop+(-2*nTopInt)+(1*nTopInt2),"");
  437.     sHTML+=drawPlate("66CC",nLeft+(2*nLeftInt)+(2*nLeftInt2),nTop+(-2*nTopInt)+(2*nTopInt2),"");
  438.     sHTML+=drawPlate("99FF",nLeft+(2*nLeftInt)+(3*nLeftInt2),nTop+(-2*nTopInt)+(3*nTopInt2),"");    
  439.  
  440.     sHTML+=drawPlate("0033",nLeft+(1*nLeftInt),nTop+(-1*nTopInt),"7");
  441.     sHTML+=drawPlate("3366",nLeft+(1*nLeftInt)+(1*nLeftInt2),nTop+(-1*nTopInt)+(1*nTopInt2),"");
  442.     sHTML+=drawPlate("6699",nLeft+(1*nLeftInt)+(2*nLeftInt2),nTop+(-1*nTopInt)+(2*nTopInt2),"");
  443.     sHTML+=drawPlate("99CC",nLeft+(1*nLeftInt)+(3*nLeftInt2),nTop+(-1*nTopInt)+(3*nTopInt2),"");
  444.     sHTML+=drawPlate("CCFF",nLeft+(1*nLeftInt)+(4*nLeftInt2),nTop+(-1*nTopInt)+(4*nTopInt2),"");    
  445.  
  446.     sHTML+=drawPlate("0000",nLeft,nTop,"6");
  447.     sHTML+=drawPlate("3333",nLeft+(1*nLeftInt2),nTop+(1*nTopInt2),"");
  448.     sHTML+=drawPlate("6666",nLeft+(2*nLeftInt2),nTop+(2*nTopInt2),"");
  449.     sHTML+=drawPlate("9999",nLeft+(3*nLeftInt2),nTop+(3*nTopInt2),"");
  450.     sHTML+=drawPlate("CCCC",nLeft+(4*nLeftInt2),nTop+(4*nTopInt2),"");
  451.     sHTML+=drawPlate("FFFF",nLeft+(5*nLeftInt2),nTop+(5*nTopInt2),"");
  452.  
  453.     sHTML+=drawPlate("3300",nLeft+(-1*nLeftInt),nTop+(1*nTopInt),"5");
  454.     sHTML+=drawPlate("6633",nLeft+(-1*nLeftInt)+(1*nLeftInt2),nTop+(1*nTopInt)+(1*nTopInt2),"");
  455.     sHTML+=drawPlate("9966",nLeft+(-1*nLeftInt)+(2*nLeftInt2),nTop+(1*nTopInt)+(2*nTopInt2),"");
  456.     sHTML+=drawPlate("CC99",nLeft+(-1*nLeftInt)+(3*nLeftInt2),nTop+(1*nTopInt)+(3*nTopInt2),"");
  457.     sHTML+=drawPlate("FFCC",nLeft+(-1*nLeftInt)+(4*nLeftInt2),nTop+(1*nTopInt)+(4*nTopInt2),"");    
  458.  
  459.     sHTML+=drawPlate("6600",nLeft+(-2*nLeftInt),nTop+(2*nTopInt),"4");
  460.     sHTML+=drawPlate("9933",nLeft+(-2*nLeftInt)+(1*nLeftInt2),nTop+(2*nTopInt)+(1*nTopInt2),"");
  461.     sHTML+=drawPlate("CC66",nLeft+(-2*nLeftInt)+(2*nLeftInt2),nTop+(2*nTopInt)+(2*nTopInt2),"");
  462.     sHTML+=drawPlate("FF99",nLeft+(-2*nLeftInt)+(3*nLeftInt2),nTop+(2*nTopInt)+(3*nTopInt2),"");
  463.  
  464.     sHTML+=drawPlate("9900",nLeft+(-3*nLeftInt),nTop+(3*nTopInt),"3");
  465.     sHTML+=drawPlate("CC33",nLeft+(-3*nLeftInt)+(1*nLeftInt2),nTop+(3*nTopInt)+(1*nTopInt2),"");
  466.     sHTML+=drawPlate("FF66",nLeft+(-3*nLeftInt)+(2*nLeftInt2),nTop+(3*nTopInt)+(2*nTopInt2),"");    
  467.  
  468.     sHTML+=drawPlate("CC00",nLeft+(-4*nLeftInt),nTop+(4*nTopInt),"2");
  469.     sHTML+=drawPlate("FF33",nLeft+(-4*nLeftInt)+(1*nLeftInt2),nTop+(4*nTopInt)+(1*nTopInt2),"");
  470.  
  471.     sHTML+=drawPlate("FF00",nLeft+(-5*nLeftInt),nTop+(5*nTopInt),"1");
  472.    
  473.     document.getElementById("idWebSafe").innerHTML=sHTML;
  474.     }
  475.    
  476. function drawPlate(C,nLeft,nTop,num)
  477.     {
  478.     var sHTML="";
  479.     arrC = new Array("FF","CC","99","66","33","00");
  480.     sHTML+="<table id='id"+C+"' cellpadding=0 cellspacing=0 style='table-layout: fixed;position:absolute;top:"+nTop+";left:"+nLeft+"'>";
  481.     for(var i=0;i<arrC.length;i++)
  482.        {
  483.        if(C=="FF99"||C=="CC99"||C=="9999"||C=="99CC"||C=="99FF"|| C=="FFCC"||C=="CCCC"||C=="CCFF"||C=="FFFF")
  484.            sHTML+="<tr><td onclick=\"setColor(this)\" style='cursor:pointer;width:25px;height:8px;background:#"+C+arrC[i]+";'>&nbsp;</td></tr>";
  485.         else
  486.             sHTML+="<tr><td onclick=\"setColor(this)\" style='cursor:pointer;width:25px;height:8px;background:#"+C+arrC[i]+";'>&nbsp;</td></tr>";
  487.         }
  488.     sHTML+="</table>";
  489.     return sHTML;
  490.     }  
  491. </script>
  492. </head>
  493. <body onload="loadTxt();init();bodyOnLoad()" style="margin:5px;margin-top:11px;margin-right:8px">
  494.  
  495. <table cellpadding=0 cellspacing=0 border=0>
  496. <tr>
  497. <td></td>
  498. <td>
  499.     <table align=right cellpadding=0 cellspacing=0 style="border-collapse:collapse">
  500.     <tr>
  501.     <td width=100% style="border-bottom:#e0e0e0 2px solid;"></td>
  502.     <td id=tab0 onclick="tabClick(0)" nowrap style="font-weight:bold;font-size:11px;color:gray;padding:5px;padding-left:7px;padding-right:7px;cursor:default;border:#e0e0e0 2px solid;border-bottom:#FCFCFC 2px solid;background:#FCFCFC"><span id=txtLang name=txtLang>Web Pallete</span></td>
  503.     <td id=tab1 onclick="tabClick(1)" nowrap style="font-weight:bold;font-size:11px;color:gray;padding:5px;padding-left:7px;padding-right:7px;cursor:pointer;border:#e0e0e0 2px solid;"><span id=txtLang name=txtLang>Named Colors</span></td>
  504.     <td id=tab2 onclick="tabClick(2)" nowrap style="font-weight:bold;font-size:11px;color:gray;padding:5px;padding-left:7px;padding-right:7px;cursor:pointer;border:#e0e0e0 2px solid;"><span id=txtLang name=txtLang>216 Web Safe</span></td>
  505.     </tr>
  506.     </table>
  507. </td>
  508. </tr>
  509. <tr>
  510. <td valign=top style="padding-right:2px">
  511.     <table>
  512.     <tr><td align=right>R:<INPUT type="text" NAME="inpRed" id="inpRed" class=inpTxt style="text-align:right" size=3 onblur="updateHex()"></td></tr>
  513.     <tr><td align=right>G:<INPUT type="text" NAME="inpGreen" id="inpGreen" class=inpTxt style="text-align:right" size=3 onblur="updateHex()"></td></tr>
  514.     <tr><td align=right>B:<INPUT type="text" NAME="inpBlue" id="inpBlue" class=inpTxt style="text-align:right" size=3 onblur="updateHex()"></td></tr>
  515.     <tr><td nowrap># <INPUT type="text" NAME="inpHex" id="inpHex" class=inpTxt style="text-align:right;width:40px" onblur="updateRGB()"></td></tr>
  516.     <tr><td colspan=2>&nbsp;</td></tr>
  517.     <tr><td align=right><div style="width:40px" align=center id=txtLang name=txtLang>New</div></td></tr>
  518.     <tr><td align=right><div id=idPreview style="padding:3px;background:white;width:40px;height:33px;padding:3"></div></td></tr>
  519.     <tr><td align=right><div id=idCurrent style="padding:3px;background:white;width:40px;height:33px;padding:3"></div></td></tr>
  520.     <tr><td align=right><div align=center id=txtLang name=txtLang>Current</div></td></tr>
  521.     </table>
  522. </td>
  523. <td>
  524.     <div id="idWebPallete" style="padding:5px;background:#FCFCFC;border:#e0e0e0 2px solid;border-top:none;width:354px;height:252px"></div>
  525.    
  526.     <div id="idNamedColors" style="display:none;padding:5px;background:#FCFCFC;border:#e0e0e0 2px solid;border-top:none;width:354px;height:252px"></div>
  527.    
  528.     <div id="idWebSafe" style="display:none;overflow:auto;padding:5px;background:#FCFCFC;border:#e0e0e0 2px solid;border-top:none;width:354px;height:252px"></div>
  529. </td>
  530. </tr>
  531. <tr>
  532.     <td>&nbsp;</td>
  533.     <td>
  534.         <table width=100% cellpadding=0 cellspacing=0>
  535.         <tr>
  536.         <td style="padding:3px;padding-bottom:4px" valign=bottom><span id=txtLang name=txtLang>Custom colors</span>:</td>
  537.         <td style="padding:3px;padding-right:0px" align=right><INPUT type="button" style="width:240px" name=btnAddToCustom id=btnAddToCustom value="Add to Custom Colors" onclick="addToCustomColors()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'"></td>
  538.         </tr>
  539.         </table>    
  540.     </td>
  541. </tr>
  542. <tr>
  543. <td>&nbsp;</td>
  544. <td>
  545.     <div style="padding:1px;background:white">
  546.     <div id="idColorCustom"></div>
  547.     </div>
  548. </td>
  549. </tr>
  550. <tr>
  551. <td colspan=2 style="padding-top:10px" align=right>
  552. <INPUT type="button" name=btnCancel id=btnCancel onclick="self.close()" value=" cancel " class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  553. <INPUT type="button" name=btnRemove id=btnRemove onclick="doRemove();self.close()" value=" remove color " class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  554. <INPUT type="button" name=btnApply id=btnApply onclick="applyCustomColor();doApply()" value=" apply " class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  555. <INPUT type="button" name=btnOk id=btnOk onclick="applyCustomColor();doApply();self.close()" value=" ok " class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'">
  556. </td>
  557. </tr>
  558. </table>
  559.  
  560. </body>
  561. </html>
  562.  
downloadcolor_picker_fg.htm Source code - Download Pcook CMS bubble guest v3.0 SDCMS version Source code
Related Source Codes/Software:
Oo 126 CMS movie site system - This procedure ASP + ACC/ASP + SQL, using new kern... 2016-09-21
IDC sales web site - Beautiful IDC sales web site source code 2016-09-21
NPOINT virtual host v1.7.0 formal version management system - The system main function is introduced 2016-09-21
Classified information network business in suzhou - Overall module: classification of supply and deman... 2016-09-21
Jie Yang v0.6.3 article system - System functions: 1, the system settings A confi... 2016-09-21
Age design website information management system SDCMS v1.1 SP1 - SDCMS is designed to build the information managem... 2016-09-21
Age design website information management system SDCMS v1.1 SP1 - SDCMS is designed to build the information managem... 2016-09-21
C9 v2.1.1 static post system - Program USES ASP + ACC structure design and develo... 2016-09-21
Imitation green download station perfect version - Before increased | software home page, on the basi... 2016-09-21
Subdomain hosting edition v1.9 s taobao, pat - The background site admin 2016-09-21
CRYENGINE - CRYENGINE is a powerful real-time game development... 2017-06-11
postal - 2017-06-11
reactide - Reactide is the first dedicated IDE for React web ... 2017-06-11
rkt - rkt is a pod-native container engine for Linux. It... 2017-06-11
uWebSockets - Tiny WebSockets https://for... 2017-06-11
realworld - TodoMVC for the RealWorld - Exemplary fullstack Me... 2017-06-11
goreplay - GoReplay is an open-source tool for capturing and ... 2017-06-10
pyenv - Simple Python version management 2017-06-10
redux-saga - An alternative side effect model for Redux apps ... 2017-06-10
angular-starter - 2017-06-10

 Back to top