color picker: can't select the color

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mini13
    New Member
    • Mar 2013
    • 13

    color picker: can't select the color

    Hi,
    I am new to use the php,javascript.
    I have done the coding for color palette.But now i also do something like by clicking the image the palette get open. But what my problem is i cann't able to select the color i want. Please tell me what i am doing wrong.Otherwise please suggest me some other code.My code is
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function getColor1() { alert("hai");
          var img = document.createElement("img");
          img.src = "img/palette.gif"; 
          //img.height = 75; 
          //img.width = 113;
          //img.style.top=800;
          //img.style.right=100;
          document.body.appendChild(img);
    	getColor();
        }
    function getColor(block)
    {alert("hai1");
    var s_url=block.href;
    var pColor=s_url.substr(s_url.indexOf("#"));
    document.getElementById("colorPalDemo").style.Color=pColor;
    //getColor1();
    }
    
    
    
    </script>
    </head>
    <body>
            <img  src="img/supst.png" usemap="#color_pallete" onClick="getColor1();" />
    <map name="color_pallete" id="color_pallete">
        <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
        <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
        <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
        <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
        <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
        <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
        <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
        <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
        <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
        <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
        <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
        <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
        <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
        <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
        <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
        <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
       </map>
    <span id="colorPalDemo"></span> 
      
    </body>
    </html>
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    JavaScript is case-sensitive. Line 19 should be:
    Code:
    ...style.[B][U]c[/U][/B]olor = ...

    Comment

    • mini13
      New Member
      • Mar 2013
      • 13

      #3
      Ya i changed. Still the palette is not working.

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        There's no text in the span element. Add some text to see the change.

        Comment

        • mini13
          New Member
          • Mar 2013
          • 13

          #5
          No no i don't want to see the text color change.I am having some textarea and i am entering some text,what i want to do is for my selected text in my textbox i want to select the color. And inside my textbox it should seen like this <font color=#FF4500>w elcome</font>

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Show your updated code with the textarea. Your original code has no textarea.

            Also, font tags are deprecated and should no longer be used.

            Comment

            • mini13
              New Member
              • Mar 2013
              • 13

              #7
              The following is my code.
              Code:
              <script type="text/javascript">
              function getColor1(id) {
                 var clr = document.getElementById(id);
              
                 if (clr.style.visibility=="visible") {
                        clr.style.visibility="hidden";
                   }
                   else {
                        clr.style.visibility="visible";
                   }
               }
              function getColor(block)
              {//alert(block);
              var s_url=block.href;
              var pColor=s_url.substr(s_url.indexOf("#"));
              document.getElementById("colorPalDemo").style.Color=pColor;
              //alert(pColor);
              }
              function changeSize(size){
              document.getElementById("ss").value;
              }
              function updateh1family(name) {
              document.getElementById("aa").value;
              }
               
              function font(elems,tag,size,name,block){//alert(size);
              alert(block);
              var i=0, el, selectedText, newText;
              while(el=elems[i++]){
              selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
              if(selectedText!=''){
              	newText='<'+tag+' size='+size+' face='+name+' color='+block+'>'+selectedText+'</'+tag+'>';
              		if(document.selection){//IE
              		document.selection.createRange().text=newText;
              		return;//prevents the double replacement
              		}
              		else{//Moz
              		el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
              		}
              	}
              }
              }
              </script>
              <form accept-charset="utf-8" action="b.html" method="post" name="fillup" enctype="multipart/form-data" onSubmit="return validate();">
              <table align="center" border="1" width="850" height="500" bgcolor="FFF5EE" >
              <tr><td>
              	<table align="center" bgcolor="">
              		<tr><td align="center" colspan="10"><img src="img/laugh.gif" alt="Smiley" /></td></tr>
              		<tr><td align="center" style="color:#FF0000; text-decoration:blink;" colspan="10" ><b><?php echo $qtype1;?></b></td></tr>
              		<tr><td colspan="10">&nbsp;</td></tr>
              		<tr><td align="center" colspan="10"><img src="img/subst.png" title="substring" onclick="formatText ([ques1,ques2,opt1,opt2,opt3,opt4],'sub');">
              		<img src="img/supst.png" title="superstring" onclick="formatText1 ([ques1,ques2,opt1,opt2,opt3,opt4],'sup');">
              	<!--<input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font');">-->
              	
              		<img src="img/mover.png" title="mover,mout" onclick="mover ([ques1,ques2,opt1,opt2,opt3,opt4],'mover','mout');"></td></tr>
              
              <img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/>
              <img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/>
              <map name="color_pallete" id="color_pallete">
                  <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
                  <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
                  <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
                  <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
                  <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
                  <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
                  <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
                  <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
                  <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
                  <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
                  <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
                  <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
                  <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
                  <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
                  <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
                  <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
                 </map>
              <span id="colorPalDemo"></span> 
              Font size:
              <select name="sizeselect" id="ss" onchange="changeSize(this.value)">
               <option value="10">10</option>
               <option value="13">13</option>
               <option value="15">15</option>
               <option value="17">17</option>
               <option value="19">19</option>
               <option value="21">21</option>
               <option value="23">23</option>
               <option value="50">50</option>
              </select>
              <input type="button" value="Font" onclick="font ([ques1,ques2,opt1,opt2,opt3,opt4],'font',document.getElementById('ss').value,document.getElementById('aa').value,document.getElementById('colorPalDemo').style.color);">
              <select name="selectFontFamily" id="aa" onchange="updateh1family(this.value)">
                  <option value="Serif">Serif</option>
                  <option value="Arial">Arial</option>
                  <option value="Sans-Serif">Sans-Serif</option>
                  <option value="Tahoma">Tahoma</option>
                  <option value="Verdana">Verdana</option>
                  <option value="Lucida Sans Unicode">Lucida Sans Unicode</option>	
                  <option value="Times New Roman">Times New Roman</option>
                 <!-- <option> Sans-Serif </option>                                  
                  <option> Tahoma </option>
                  <option> Verdana </option>
                  <option> Lucida Sans Unicode </option>                               
                </select>-->
              
              		
              		<tr>
              			<td>
              			Statement1<font color="#0000FF">*</font>
              			</td>
              			<td>
              			:
              			</td>
              			
              			<td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="quest_wav1" name="quest_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="quest_img1" name="quest_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			<td>&nbsp;</td>
              			<td>
              			Statement2<font color="#0000FF">*</font>
              			</td>
              			<td>
              			:
              			</td>
              			<td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>&nbsp;</td>
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="quest_wav2" name="quest_wav2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="quest_img2" name="quest_img2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			
              		</tr>
              		<tr>
              			<td>
              			Option1<font color="red">*</font>
              			</td>
              			<td>
              			:
              			</td>
              			
              			<td>
              			<textarea name="opt1" id="opt1" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="opt_wav1" name="opt_wav1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="opt_img1" name="opt_img1"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			<td>&nbsp;</td>
              			<td>
              			Option2
              			</td>
              			<td>
              			:
              			</td>
              			
              			<td><textarea name="opt2" id="opt2" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>&nbsp;</td>
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="opt_wav2" name="opt_wav2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="opt_img2" name="opt_img2"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			
              		</tr>
              		<tr>
              			<td>
              			Option3
              			</td>
              			<td>
              			:
              			</td>
              			
              			<td><textarea name="opt3" id="opt3" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="opt_wav3" name="opt_wav3"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="opt_img3" name="opt_img3"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			<td>&nbsp;</td>
              			<td>
              			Option4
              			</td>
              			<td>
              			:
              			</td>
              			
              			<td><textarea name="opt4" id="opt4" cols="25" rows="3" style="width: 220px; height: 100px;"></textarea>
              			</td>
              			<td>&nbsp;</td>
              			
              			<td>
              				<table>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/mic1_30.jpg); width:30px; height:25px;" >
              				<input type="file" id="opt_wav4" name="opt_wav4"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" size="1"  />
              				</div>
              				</td>
              				</tr>
              				<tr>
              				<td width="10">
              				<div style="background-image:url(img/img1.jpeg); width:30px; height:30px;" >
              				<input type="file" id="opt_img4" name="opt_img4"  style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); " size="1"   />
              				</div>
              				</td>
              				</tr>
              				</table>
              			</td>
              			
              		</tr>
              		<tr>
              			<td>correct Answer<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="corr_ans" id="corr_ans"  size="16" onkeypress="return isNumeric(event)"></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              			<td>Topic<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="topic" id="topic" size="16"  /></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              		</tr>
              		
              		<tr>
              			<td>Page No<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="pno" id="pno"  size="16" onkeypress="return isNumberKey(event, this.value)"/></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              			<td>Chapter No<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="cno" id="cno" size="16"  onkeypress="return isNumberKey(event, this.value)"/></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              		</tr>
              		<tr>
              			<td>Year<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="year" id="year" size="16" onkeypress="return isNumberKey(event, this.value)" /></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              			<td>Standard<font color="red">*</font></td><td>:</td>
              			<td><input type="text" name="std" id="std" size="16"/></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              		</tr>
              		<tr>
              			<td>Board</td><td>:</td>
              			<td><input type="text" name="board_txt" id="board_txt" size="16" readonly="" value="<?php echo $boardname; ?>" style="background-color:#FFFFFF;" /></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              			<td>Subject</td><td>:</td>
              			<td><input type="text" name="subject_txt" id="subject_txt" size="16" readonly="" value="<?php echo $subjectname; ?>" style="background-color:#FFFFFF;" />
              			
              			<input type="hidden" name="language" id="language" value="<?php echo $language_name; ?>" />
              
              			<input type="hidden" name="qtype" id="qtype" value="<?php echo $qtype2; ?>" />
              			</td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              		</tr>
              		<tr>
              			<td>Fill Type</td>
              			<td>:</td>
              			<td>
              			<select id="fill_type" name="fill_type" > 
              			<option value="Fillup" selected="selected">Fillup</option>
              			<option value="Abbreviation">Abbreviation</option>
              			<option value="Preposition">Preposition</option>
              			<option value="Phrases">Phrases</option>
              			<option value="Compound">Compound</option>
              			<option value="GrammarFill1">GrammarFill1</option>
              			<option value="TOF">TOF</option>
              			<option value="FrameQues">FrameQuestion</option>
              			<option value="Pronoun">Pronoun</option>
              			<option value="Pattern">Pattern</option>
              			<option value="Auxillary">Auxillary</option>
              			<option value="IdPattern">IdPattern</option>
              			<option value="Proverb">Proverb</option>
              			<option value="Spelling">Spelling</option>		
              			</select>
              			</td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              			<td>Explanation</td><td>:</td>
              			<td><input type="text" name="exp" id="exp" size="16"  /></td>
              			<td>&nbsp;</td>
              			<td>&nbsp;</td>
              		</tr>
              		<tr><td colspan="10">&nbsp;&nbsp;</td></tr>
              		<tr>
              		  <td><font color="#FF0000"><b>Note :</b></font></td><td  colspan="4" align="center"><font color="#0000FF"> *</font> Mandatory Fields (Either one)</td>
              		  <td colspan="5" align="center"><font color="#FF0000">*</font> Mandatory Fields</td></tr>
              		  <td colspan="3" align="left"><img src="img/mic1_30.jpg" alt="Upload Wave" />Upload WAVE</td>
              		  <td colspan="4" align="left"><img src="img/img1.jpeg" alt="Upload Image" />Upload IMAGE</td>
              		<tr>
              		<tr><td colspan="10">&nbsp;&nbsp;</td></tr>
              			<td colspan="10" align="center">
              			<input type="submit" name="add" value="Add" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"/>&nbsp;&nbsp;&nbsp;&nbsp;
              			<input type="reset" name="clear" value="Clear" style="background-color:#FFFF00; font:Arial, Helvetica, sans-serif; color:#FF0000"  />
              			</td>
              		</tr>
              		
              	</table>
              
              </td></tr>
              </table>
              </form>

              Comment

              • mini13
                New Member
                • Mar 2013
                • 13

                #8
                Thanks for the help acoder. It works fine now.

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032

                  #9
                  That's great. Can you post your working code please for the benefit of others? Thanks.

                  PS. sorry, didn't get the chance to look at your posted code...

                  Comment

                  • mini13
                    New Member
                    • Mar 2013
                    • 13

                    #10
                    Instead the following function

                    Code:
                     function getColor(block)
                    {
                    var s_url=block.href;
                    var pColor=s_url.substr(s_url.indexOf("#"));
                    document.getElementById("colorPalDemo").style.Color=pColor;
                    }
                    I simply used the following function

                    Code:
                    function getColor(block1)
                    {
                    var s_url=block1.href;
                    var pColor=s_url.substr(s_url.indexOf("#"));
                    document.getElementsByTagName('textarea').value=pColor;
                    }
                    Also removed the span tag.

                    Comment

                    Working...