JAVASCRIPT   76

js color picker v2 js

Guest on 13th June 2022 05:09:18 PM

  1.         /************************************************************************************************************
  2.        
  3.         This is a script from . You will find this and a lot of other scripts at our website.  
  4.        
  5.         Terms of use:
  6.         You are free to use this script as long as the copyright message is kept intact. However, you may not
  7.         redistribute, sell or repost it without our permission.
  8.        
  9.         Thank you!
  10.        
  11.        
  12.         Alf Magne Kalleland
  13.        
  14.         ************************************************************************************************************/  
  15.  
  16.         var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  17.         var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
  18.        
  19.         var form_widget_amount_slider_handle = 'images/slider_handle.gif';
  20.         var slider_handle_image_obj = false;
  21.         var sliderObjectArray = new Array();
  22.         var slider_counter = 0;
  23.         var slideInProgress = false;
  24.         var handle_start_x;
  25.         var event_start_x;
  26.         var currentSliderIndex;
  27.        
  28.         function form_widget_cancel_event()
  29.         {
  30.                 return false;          
  31.         }
  32.        
  33.         function getImageSliderHeight(){
  34.                 if(!slider_handle_image_obj){
  35.                         slider_handle_image_obj = new Image();
  36.                         slider_handle_image_obj.src = form_widget_amount_slider_handle;
  37.                 }
  38.                 if(slider_handle_image_obj.width>0){
  39.                         return;
  40.                 }else{
  41.                         setTimeout('getImageSliderHeight()',50);
  42.                 }
  43.         }
  44.        
  45.         function positionSliderImage(e,theIndex,inputObj)
  46.         {
  47.                 if(this)inputObj = this;
  48.                 if(!theIndex)theIndex = inputObj.getAttribute('sliderIndex');
  49.                 var handleImg = document.getElementById('slider_handle' + theIndex);
  50.                 var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
  51.                 var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];         
  52.                 handleImg.style.left = currentValue * ratio + 'px';                    
  53.                 setColorByRGB();
  54.         }
  55.        
  56.         function adjustFormValue(theIndex)
  57.         {
  58.                 var handleImg = document.getElementById('slider_handle' + theIndex);   
  59.                 var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
  60.                 var currentPos = handleImg.style.left.replace('px','');
  61.                 sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
  62.                
  63.         }
  64.                
  65.         function initMoveSlider(e)
  66.         {
  67.        
  68.                 if(document.all)e = event;     
  69.                 slideInProgress = true;
  70.                 event_start_x = e.clientX;
  71.                 handle_start_x = this.style.left.replace('px','');
  72.                 currentSliderIndex = this.id.replace(/[^\d]/g,'');
  73.                 return false;
  74.         }
  75.        
  76.         function startMoveSlider(e)
  77.         {
  78.                 if(document.all)e = event;     
  79.                 if(!slideInProgress)return;    
  80.                 var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
  81.                 if(leftPos<0)leftPos = 0;
  82.                 if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
  83.                 document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
  84.                 adjustFormValue(currentSliderIndex);
  85.                 if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
  86.                         eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
  87.                 }
  88.         }
  89.        
  90.         function stopMoveSlider()
  91.         {
  92.                 slideInProgress = false;
  93.         }
  94.        
  95.        
  96.         function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
  97.         {
  98.                 if(!slider_handle_image_obj){
  99.                         getImageSliderHeight();        
  100.                 }
  101.                                
  102.                 slider_counter = slider_counter +1;
  103.                 sliderObjectArray[slider_counter] = new Array();
  104.                 sliderObjectArray[slider_counter] = {"width":width - 9,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
  105.                
  106.                 formTarget.setAttribute('sliderIndex',slider_counter);
  107.                 formTarget.onchange = positionSliderImage;
  108.                 var parentObj = document.createElement('DIV');
  109.                 parentObj.style.width = width + 'px';
  110.                 parentObj.style.height = '12px';        // The height of the image
  111.                 parentObj.style.position = 'relative';
  112.                 parentObj.id = 'slider_container' + slider_counter;
  113.                 document.getElementById(targetElId).appendChild(parentObj);
  114.                
  115.                 var obj = document.createElement('DIV');
  116.                 obj.className = 'form_widget_amount_slider';
  117.                 obj.innerHTML = '<span></span>';
  118.                 obj.style.width = width + 'px';
  119.                 obj.id = 'slider_slider' + slider_counter;
  120.                 obj.style.position = 'absolute';
  121.                 obj.style.bottom = '0px';
  122.                 parentObj.appendChild(obj);
  123.                
  124.                 var handleImg = document.createElement('IMG');
  125.                 handleImg.style.position = 'absolute';
  126.                 handleImg.style.left = '0px';
  127.                 handleImg.style.zIndex = 5;
  128.                 handleImg.src = slider_handle_image_obj.src;
  129.                 handleImg.id = 'slider_handle' + slider_counter;
  130.                 handleImg.onmousedown = initMoveSlider;
  131.                 if(document.body.onmouseup){
  132.                         if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
  133.                                 alert('You allready have an onmouseup event assigned to the body tag');
  134.                         }
  135.                 }else{
  136.                         document.body.onmouseup = stopMoveSlider;      
  137.                         document.body.onmousemove = startMoveSlider;   
  138.                 }
  139.                 handleImg.ondragstart = form_widget_cancel_event;
  140.                 parentObj.appendChild(handleImg);
  141.                 positionSliderImage(false,slider_counter);
  142.         }
  143.                
  144.  
  145.        
  146.         var namedColors = new Array('AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmond','Blue','BlueViolet','Brown',
  147.         'BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray',
  148.         'DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','Darkorange','DarkOrchid','DarkRed','DarkSalmon','DarkSeaGreen','DarkSlateBlue','DarkSlateGray',
  149.         'DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DodgerBlue','Feldspar','FireBrick','FloralWhite','ForestGreen','Fuchsia','Gainsboro',
  150.         'GhostWhite','Gold','GoldenRod','Gray','Green','GreenYellow','HoneyDew','HotPink','IndianRed','Indigo','Ivory','Khaki','Lavender','LavenderBlush',
  151.         'LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGrey','LightGreen','LightPink','LightSalmon','LightSeaGreen',
  152.         'LightSkyBlue','LightSlateBlue','LightSlateGray','LightSteelBlue','LightYellow','Lime','LimeGreen','Linen','Magenta','Maroon','MediumAquaMarine',
  153.         'MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','MediumTurquoise','MediumVioletRed','MidnightBlue',
  154.         'MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','OrangeRed','Orchid','PaleGoldenRod','PaleGreen',
  155.         'PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple','Red','RosyBrown','RoyalBlue','SaddleBrown',
  156.         'Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','Snow','SpringGreen','SteelBlue','Tan','Teal','Thistle',
  157.         'Tomato','Turquoise','Violet','VioletRed','Wheat','White','WhiteSmoke','Yellow','YellowGreen');
  158.        
  159.          var namedColorRGB = new Array('#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#F0FFFF','#F5F5DC','#FFE4C4','#000000','#FFEBCD','#0000FF','#8A2BE2','#A52A2A','#DEB887',
  160.         '#5F9EA0','#7FFF00','#D2691E','#FF7F50','#6495ED','#FFF8DC','#DC143C','#00FFFF','#00008B','#008B8B','#B8860B','#A9A9A9','#006400','#BDB76B','#8B008B',
  161.         '#556B2F','#FF8C00','#9932CC','#8B0000','#E9967A','#8FBC8F','#483D8B','#2F4F4F','#00CED1','#9400D3','#FF1493','#00BFFF','#696969','#1E90FF','#D19275',
  162.         '#B22222','#FFFAF0','#228B22','#FF00FF','#DCDCDC','#F8F8FF','#FFD700','#DAA520','#808080','#008000','#ADFF2F','#F0FFF0','#FF69B4','#CD5C5C','#4B0082',
  163.         '#FFFFF0','#F0E68C','#E6E6FA','#FFF0F5','#7CFC00','#FFFACD','#ADD8E6','#F08080','#E0FFFF','#FAFAD2','#D3D3D3','#90EE90','#FFB6C1','#FFA07A','#20B2AA',
  164.         '#87CEFA','#8470FF','#778899','#B0C4DE','#FFFFE0','#00FF00','#32CD32','#FAF0E6','#FF00FF','#800000','#66CDAA','#0000CD','#BA55D3','#9370D8','#3CB371',
  165.         '#7B68EE','#00FA9A','#48D1CC','#C71585','#191970','#F5FFFA','#FFE4E1','#FFE4B5','#FFDEAD','#000080','#FDF5E6','#808000','#6B8E23','#FFA500','#FF4500',
  166.         '#DA70D6','#EEE8AA','#98FB98','#AFEEEE','#D87093','#FFEFD5','#FFDAB9','#CD853F','#FFC0CB','#DDA0DD','#B0E0E6','#800080','#FF0000','#BC8F8F','#4169E1',
  167.         '#8B4513','#FA8072','#F4A460','#2E8B57','#FFF5EE','#A0522D','#C0C0C0','#87CEEB','#6A5ACD','#708090','#FFFAFA','#00FF7F','#4682B4','#D2B48C','#008080',
  168.         '#D8BFD8','#FF6347','#40E0D0','#EE82EE','#D02090','#F5DEB3','#FFFFFF','#F5F5F5','#FFFF00','#9ACD32');  
  169.        
  170.        
  171.         var color_picker_div = false;
  172.         var color_picker_active_tab = false;
  173.         var color_picker_form_field = false;
  174.         var color_picker_active_input = false;
  175.         function baseConverter (number,ob,nb) {
  176.                 number = number + "";
  177.                 number = number.toUpperCase();
  178.                 var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  179.                 var dec = 0;
  180.                 for (var i = 0; i <=  number.length; i++) {
  181.                         dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
  182.                 }
  183.                 number = "";
  184.                 var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
  185.                 for (var i = magnitude; i >= 0; i--) {
  186.                         var amount = Math.floor(dec/Math.pow(nb,i));
  187.                         number = number + list.charAt(amount);
  188.                         dec -= amount*(Math.pow(nb,i));
  189.                 }
  190.                 if(number.length==0)number=0;
  191.                 return number;
  192.         }
  193.        
  194.         function colorPickerGetTopPos(inputObj)
  195.         {
  196.                
  197.           var returnValue = inputObj.offsetTop;
  198.           while((inputObj = inputObj.offsetParent) != null){
  199.                 returnValue += inputObj.offsetTop;
  200.           }
  201.           return returnValue;
  202.         }
  203.        
  204.         function colorPickerGetLeftPos(inputObj)
  205.         {
  206.           var returnValue = inputObj.offsetLeft;
  207.           while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
  208.           return returnValue;
  209.         }
  210.        
  211.         function cancelColorPickerEvent(){
  212.                 return false;
  213.         }
  214.        
  215.         function showHideColorOptions(e,inputObj)
  216.         {
  217.                
  218.  
  219.                 var thisObj = this;
  220.                 if(inputObj){
  221.                         var parentNode = inputObj.parentNode;
  222.                         thisObj = inputObj;
  223.                 }else var parentNode = this.parentNode;
  224.                 var activeColorDiv = false;
  225.                 var subDiv = parentNode.getElementsByTagName('DIV')[0];
  226.                 counter=0;     
  227.                 var initZIndex = 10;   
  228.                 var contentDiv = document.getElementById('color_picker_content').getElementsByTagName('DIV')[0];
  229.                 do{                    
  230.                         if(subDiv.tagName=='DIV' && subDiv.className!='colorPickerCloseButton'){
  231.                                 if(subDiv==thisObj){
  232.                                         thisObj.className='colorPickerTab_active';
  233.                                         thisObj.style.zIndex = 50;
  234.                                         var img = thisObj.getElementsByTagName('IMG')[0];
  235.                                         img.src = "images/tab_right_active.gif"
  236.                                         img.src = img.src.replace(/inactive/,'active');                                                
  237.                                         contentDiv.style.display='block';
  238.                                         activeColorDiv = contentDiv;
  239.                                 }else{
  240.                                         subDiv.className = 'colorPickerTab_inactive';  
  241.                                         var img = subDiv.getElementsByTagName('IMG')[0];
  242.                                         img.src = "images/tab_right_inactive.gif";
  243.                                         if(activeColorDiv)
  244.                                                 subDiv.style.zIndex = initZIndex - counter;
  245.                                         else
  246.                                                 subDiv.style.zIndex = counter;
  247.                                         contentDiv.style.display='none';
  248.                                 }
  249.                                 counter++;
  250.                         }
  251.                         subDiv = subDiv.nextSibling;
  252.                         if(contentDiv.nextSibling)contentDiv = contentDiv.nextSibling;
  253.                 }while(subDiv);
  254.                
  255.                
  256.                 document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
  257.  
  258.  
  259.         }
  260.        
  261.         function createColorPickerTopRow(inputObj){
  262.                 var tabs = ['RGB','Named colors','Color slider'];
  263.                 var tabWidths = [37,90,70];
  264.                 var div = document.createElement('DIV');
  265.                 div.className='colorPicker_topRow';
  266.        
  267.                 inputObj.appendChild(div);     
  268.                 var currentWidth = 0;
  269.                 for(var no=0;no<tabs.length;no++){                     
  270.                        
  271.                         var tabDiv = document.createElement('DIV');
  272.                         tabDiv.onselectstart = cancelColorPickerEvent;
  273.                         tabDiv.ondragstart = cancelColorPickerEvent;
  274.                         if(no==0){
  275.                                 suffix = 'active';
  276.                                 color_picker_active_tab = this;
  277.                         }else suffix = 'inactive';
  278.                        
  279.                         tabDiv.id = 'colorPickerTab' + no;
  280.                         tabDiv.onclick = showHideColorOptions;
  281.                         if(no==0)tabDiv.style.zIndex = 50; else tabDiv.style.zIndex = 1 + (tabs.length-no);
  282.                         tabDiv.style.left = currentWidth + 'px';
  283.                         tabDiv.style.position = 'absolute';
  284.                         tabDiv.className='colorPickerTab_' + suffix;
  285.                         var tabSpan = document.createElement('SPAN');
  286.                         tabSpan.innerHTML = tabs[no];
  287.                         tabDiv.appendChild(tabSpan);
  288.                         var tabImg = document.createElement('IMG');
  289.                         tabImg.src = "images/tab_right_" + suffix + ".gif";
  290.                         tabDiv.appendChild(tabImg);
  291.                         div.appendChild(tabDiv);
  292.                         if(navigatorVersion<6 && MSIE){ /* Lower IE version fix */
  293.                                 tabSpan.style.position = 'relative';
  294.                                 tabImg.style.position = 'relative';
  295.                                 tabImg.style.left = '-3px';            
  296.                                 tabDiv.style.cursor = 'hand';  
  297.                         }                      
  298.                         currentWidth = currentWidth + tabWidths[no];
  299.                
  300.                 }
  301.                
  302.                 var closeButton = document.createElement('DIV');
  303.                 closeButton.className='colorPickerCloseButton';
  304.                 closeButton.innerHTML = 'x';
  305.                 closeButton.onclick = closeColorPicker;
  306.                 closeButton.onmouseover = toggleCloseButton;
  307.                 closeButton.onmouseout = toggleOffCloseButton;
  308.                 div.appendChild(closeButton);
  309.                
  310.         }
  311.        
  312.         function toggleCloseButton()
  313.         {
  314.                 this.style.color='#FFF';
  315.                 this.style.backgroundColor = '#317082';
  316.         }
  317.         function toggleOffCloseButton()
  318.         {
  319.                 this.style.color='';
  320.                 this.style.backgroundColor = '';                       
  321.                
  322.         }
  323.         function closeColorPicker()
  324.         {
  325.                
  326.                 color_picker_div.style.display='none';
  327.         }
  328.         function createWebColors(inputObj){
  329.                 var webColorDiv = document.createElement('DIV');
  330.                 webColorDiv.style.paddingTop = '1px';
  331.                 inputObj.appendChild(webColorDiv);
  332.                 for(var r=15;r>=0;r-=3){
  333.                         for(var g=0;g<=15;g+=3){
  334.                                 for(var b=0;b<=15;b+=3){
  335.                                         var red = baseConverter(r,10,16) + '';
  336.                                         var green = baseConverter(g,10,16) + '';
  337.                                         var blue = baseConverter(b,10,16) + '';
  338.                                        
  339.                                         var color = '#' + red + red + green + green + blue + blue;
  340.                                         var div = document.createElement('DIV');
  341.                                         div.style.backgroundColor=color;
  342.                                         div.innerHTML = '<span></span>';
  343.                                         div.className='colorSquare';
  344.                                         div.title = color;     
  345.                                         div.onclick = chooseColor;
  346.                                         div.setAttribute('rgbColor',color);
  347.                                         div.onmouseover = colorPickerShowStatusBarText;
  348.                                         div.onmouseout = colorPickerHideStatusBarText;
  349.                                         webColorDiv.appendChild(div);
  350.                                 }
  351.                         }
  352.                 }
  353.         }
  354.                
  355.         function createNamedColors(inputObj){
  356.                 var namedColorDiv = document.createElement('DIV');
  357.                 namedColorDiv.style.paddingTop = '1px';
  358.                 namedColorDiv.style.display='none';
  359.                 inputObj.appendChild(namedColorDiv);
  360.                 for(var no=0;no<namedColors.length;no++){
  361.                         var color = namedColorRGB[no];
  362.                         var div = document.createElement('DIV');
  363.                         div.style.backgroundColor=color;
  364.                         div.innerHTML = '<span></span>';
  365.                         div.className='colorSquare';
  366.                         div.title = namedColors[no];   
  367.                         div.onclick = chooseColor;
  368.                         div.onmouseover = colorPickerShowStatusBarText;
  369.                         div.onmouseout = colorPickerHideStatusBarText;
  370.                         div.setAttribute('rgbColor',color);
  371.                         namedColorDiv.appendChild(div);                        
  372.                 }      
  373.        
  374.         }
  375.        
  376.         function colorPickerHideStatusBarText()
  377.         {
  378.                 document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
  379.         }
  380.        
  381.         function colorPickerShowStatusBarText()
  382.         {
  383.                 var txt = this.getAttribute('rgbColor');
  384.                 if(this.title.indexOf('#')<0)txt = txt + " (" + this.title + ")";
  385.                 document.getElementById('colorPicker_statusBarTxt').innerHTML = txt;   
  386.         }
  387.        
  388.         function createAllColorDiv(inputObj){
  389.                 var allColorDiv = document.createElement('DIV');
  390.                 allColorDiv.style.display='none';
  391.                 allColorDiv.className = 'js_color_picker_allColorDiv';
  392.                 allColorDiv.style.paddingLeft = '3px';
  393.                 allColorDiv.style.paddingTop = '5px';
  394.                 allColorDiv.style.paddingBottom = '5px';
  395.                 inputObj.appendChild(allColorDiv);     
  396.                
  397.                 var labelDiv = document.createElement('DIV');
  398.                 labelDiv.className='colorSliderLabel';
  399.                 labelDiv.innerHTML = 'R';
  400.                 allColorDiv.appendChild(labelDiv);     
  401.                
  402.                 var innerDiv = document.createElement('DIV');
  403.                 innerDiv.className = 'colorSlider';
  404.                 innerDiv.id = 'sliderRedColor';        
  405.                 allColorDiv.appendChild(innerDiv);             
  406.                
  407.                 var innerDivInput = document.createElement('DIV');
  408.                 innerDivInput.className='colorInput';
  409.                
  410.                 var input = document.createElement('INPUT');
  411.                 input.id = 'js_color_picker_red_color';
  412.                 input.maxlength = 3;
  413.                 input.style.width = '48px';
  414.                 input.style.fontSize = '11px';
  415.                 input.name = 'redColor';
  416.                 input.value = 0;
  417.                
  418.                 innerDivInput.appendChild(input);
  419.                 allColorDiv.appendChild(innerDivInput);
  420.  
  421.                 var labelDiv = document.createElement('DIV');
  422.                 labelDiv.className='colorSliderLabel';
  423.                 labelDiv.innerHTML = 'G';
  424.                 allColorDiv.appendChild(labelDiv);     
  425.                                
  426.                 var innerDiv = document.createElement('DIV');
  427.                 innerDiv.className = 'colorSlider';
  428.                 innerDiv.id = 'sliderGreenColor';              
  429.                 allColorDiv.appendChild(innerDiv);             
  430.                
  431.                 var innerDivInput = document.createElement('DIV');
  432.                 innerDivInput.className='colorInput';
  433.                
  434.                 var input = document.createElement('INPUT');
  435.                 input.id = 'js_color_picker_green_color';
  436.                 input.maxlength = 3;
  437.                 input.style.width = '48px';
  438.                 input.style.fontSize = '11px';
  439.                 input.name = 'GreenColor';
  440.                 input.value = 0;
  441.                
  442.                 innerDivInput.appendChild(input);
  443.                 allColorDiv.appendChild(innerDivInput);
  444.                
  445.                 var labelDiv = document.createElement('DIV');
  446.                 labelDiv.className='colorSliderLabel';
  447.                 labelDiv.innerHTML = 'B';
  448.                 allColorDiv.appendChild(labelDiv);                     
  449.                 var innerDiv = document.createElement('DIV');
  450.                 innerDiv.className = 'colorSlider';
  451.                 innerDiv.id = 'sliderBlueColor';               
  452.                 allColorDiv.appendChild(innerDiv);             
  453.                
  454.                 var innerDivInput = document.createElement('DIV');
  455.                 innerDivInput.className='colorInput';
  456.                
  457.                 var input = document.createElement('INPUT');
  458.                 input.id = 'js_color_picker_blue_color';
  459.                 input.maxlength = 3;
  460.                 input.style.width = '48px';
  461.                 input.style.fontSize = '11px';
  462.                 input.name = 'BlueColor';
  463.                 input.value = 0;
  464.                
  465.                 innerDivInput.appendChild(input);
  466.                 allColorDiv.appendChild(innerDivInput);
  467.  
  468.        
  469.                 var colorPreview = document.createElement('DIV');
  470.                 colorPreview.className='colorPreviewDiv';
  471.                 colorPreview.id = 'colorPreview';
  472.                 colorPreview.style.backgroundColor = '#000000';
  473.                 colorPreview.innerHTML = '<span></span>';      
  474.                 colorPreview.title = 'Click on me to assign color';    
  475.                 allColorDiv.appendChild(colorPreview);
  476.                 colorPreview.onclick = chooseColorSlider;
  477.                
  478.                 var colorCodeDiv = document.createElement('DIV');
  479.                 colorCodeDiv.className='colorCodeDiv';         
  480.                 var input = document.createElement('INPUT');
  481.                 input.id = 'js_color_picker_color_code';
  482.                
  483.                 colorCodeDiv.appendChild(input);
  484.                 input.maxLength = 7;
  485.                 input.style.fontSize = '11px';
  486.                 input.style.width = '48px';            
  487.                 input.value = '#000000';
  488.                 input.onchange = setPreviewColorFromTxt;
  489.                 input.onblur = setPreviewColorFromTxt;
  490.                 allColorDiv.appendChild(colorCodeDiv);
  491.                
  492.                 var clearingDiv = document.createElement('DIV');
  493.                 clearingDiv.style.clear = 'both';
  494.                 allColorDiv.appendChild(clearingDiv);
  495.                
  496.                
  497.                 form_widget_amount_slider('sliderRedColor',document.getElementById('js_color_picker_red_color'),170,0,255,"setColorByRGB()");
  498.                 form_widget_amount_slider('sliderGreenColor',document.getElementById('js_color_picker_green_color'),170,0,255,"setColorByRGB()");
  499.                 form_widget_amount_slider('sliderBlueColor',document.getElementById('js_color_picker_blue_color'),170,0,255,"setColorByRGB()");
  500.         }
  501.        
  502.         function setPreviewColorFromTxt()
  503.         {
  504.                 if(this.value.match(/\#[0-9A-F]{6}/g)){
  505.                         document.getElementById('colorPreview').style.backgroundColor=this.value;
  506.                         var r = this.value.substr(1,2);
  507.                         var g = this.value.substr(3,2);
  508.                         var b = this.value.substr(5,2);
  509.                         document.getElementById('js_color_picker_red_color').value = baseConverter(r,16,10);
  510.                         document.getElementById('js_color_picker_green_color').value = baseConverter(g,16,10);
  511.                         document.getElementById('js_color_picker_blue_color').value = baseConverter(b,16,10);
  512.                        
  513.                         positionSliderImage(false,1,document.getElementById('js_color_picker_red_color'));
  514.                         positionSliderImage(false,2,document.getElementById('js_color_picker_green_color'));
  515.                         positionSliderImage(false,3,document.getElementById('js_color_picker_blue_color'));
  516.                 }
  517.                
  518.         }
  519.        
  520.         function chooseColor()
  521.         {
  522.                 color_picker_form_field.value = this.getAttribute('rgbColor');
  523.                 color_picker_div.style.display='none';
  524.         }
  525.        
  526.         function createStatusBar(inputObj)
  527.         {
  528.                 var div = document.createElement('DIV');
  529.                 div.className='colorPicker_statusBar'; 
  530.                 var innerSpan = document.createElement('SPAN');
  531.                 innerSpan.id = 'colorPicker_statusBarTxt';
  532.                 div.appendChild(innerSpan);
  533.                 inputObj.appendChild(div);
  534.         }
  535.        
  536.         function chooseColorSlider()
  537.         {
  538.                 color_picker_form_field.value = document.getElementById('js_color_picker_color_code').value;
  539.                 color_picker_div.style.display='none';         
  540.         }
  541.        
  542.        
  543.         function showColorPicker(inputObj,formField)
  544.         {
  545.                 if(!color_picker_div){
  546.                         color_picker_div = document.createElement('DIV');
  547.                         color_picker_div.id = 'dhtmlgoodies_colorPicker';
  548.                         color_picker_div.style.display='none';
  549.                         document.body.appendChild(color_picker_div);
  550.                         createColorPickerTopRow(color_picker_div);                     
  551.                         var contentDiv = document.createElement('DIV');
  552.                         contentDiv.id = 'color_picker_content';
  553.                         color_picker_div.appendChild(contentDiv);                      
  554.                         createWebColors(contentDiv);
  555.                         createNamedColors(contentDiv);
  556.                         createAllColorDiv(contentDiv);
  557.                         createStatusBar(color_picker_div);                     
  558.                 }              
  559.                 if(color_picker_div.style.display=='none' || color_picker_active_input!=inputObj)color_picker_div.style.display='block'; else color_picker_div.style.display='none';           
  560.                 color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px';
  561.                 color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px';
  562.                 color_picker_form_field = formField;
  563.                 color_picker_active_input = inputObj;          
  564.         }
  565.  
  566.         function setColorByRGB()
  567.         {
  568.                 var formObj = document.forms[0];       
  569.                 var r = document.getElementById('js_color_picker_red_color').value.replace(/[^\d]/,'');
  570.                 var g = document.getElementById('js_color_picker_green_color').value.replace(/[^\d]/,'');
  571.                 var b = document.getElementById('js_color_picker_blue_color').value.replace(/[^\d]/,'');               
  572.                 if(r/1>255)r=255;
  573.                 if(g/1>255)g=255;
  574.                 if(b/1>255)b=255;
  575.                 r = baseConverter(r,10,16) + '';
  576.                 g = baseConverter(g,10,16) + '';
  577.                 b = baseConverter(b,10,16) + '';
  578.                 if(r.length==1)r = '0' + r;
  579.                 if(g.length==1)g = '0' + g;
  580.                 if(b.length==1)b = '0' + b;
  581.  
  582.                 document.getElementById('colorPreview').style.backgroundColor = '#' + r + g + b;
  583.                 document.getElementById('js_color_picker_color_code').value = '#' + r + g + b;         
  584.         }

Raw Paste

Login or Register to edit or fork this paste. It's free.