Color picker for Textbox in jQuery using VB.NET

Describes how to use jQuery color picker for changing the font color of textbox.
  • 2967

The demonstration is about how to use jQuery color picker for changing the font color of textbox which is not specific to particular textbox but to all textboxes on form and also not for background color .

Here is a simple color picker layout using jQuery to explain what I am trying to say.

Code Snippets

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Color Picker Example</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://wanderinghorse.net/computing/javascript/jquery/colorpicker/sgbeal-colorpicker.jquery.js"></script>
 
   <script type="text/javascript">
       $(function () {
          $('#MyDemoColorPicker1').empty().addColorPicker({
              clickCallback: function (c) {
                  $('input').css('color', c);
              }
          });
      });
    </script>
    <style type="text/css">
      .ColorBlotch
      {
          border: 1px solid #000000;
          padding: 0 2px 0 2px;
          font-family: monospace;
          cursor: pointer;
          font-size: 1.2em;
      }
      .code
      {
          background-color: #fff;
          color: #000;
          font-family: monospace;
          overflow: auto;
          border: 1px dashed #000;
      }
    </style>
</head>
<
body bgcolor="White" style="height: 154px">
  <form id="form1" runat="server"
    style="font-family: Verdana; font-size: small; background-color: #E6F7FF; height: 148px;">
    <div id="MyDemoColorPicker1">
       <span class="ColorBlotch" style="background-color: transparent;">
 
       <br />
 
      ?</span><span class="ColorBlotch"
          style="background-color: rgb(255, 255, 255);"></span>
       <span class="ColorBlotch" style="background-color: rgb(208, 208, 208);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(119, 119, 119);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(255, 170, 170);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(255, 0, 255);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(255, 0, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(170, 0, 0);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(144, 0, 255);">
         </span>
 
      <span class="ColorBlotch" style="background-color: rgb(255, 108, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(255, 255, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(255, 187, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(240, 230, 140);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(210, 178, 41);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(170, 255, 170);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(0, 255, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(0, 170, 0);">
         </
span>
 
      <span class="ColorBlotch" style="background-color: rgb(107, 142, 35);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(0, 119, 0);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(187, 221, 255);">
         </span>
       <span class="ColorBlotch" style="background-color: rgb(0, 255, 221);">
  
      </span>
       <span class="ColorBlotch" style="background-color: rgb(170, 170, 255);">
         </
span>
       <span class="ColorBlotch" style="background-color: rgb(0, 0, 255);">
         </
span>
 
      <span class="ColorBlotch" style="background-color: rgb(0, 0, 170);">
         </
span>
    </div>
    <br />
    Enter text below and choose a color from the palate.<br />
    <br />
    <asp:TextBox ID="TextBox1" runat="server" BackColor="#F3F3F3" Font-Bold="True"
        Font-Names="Verdana" Font-Size="Medium" Height="31px" Width="146px"></asp:TextBox>
    &nbsp;&nbsp;
    <asp:TextBox ID="TextBox2" runat="server" BackColor="#F3F3F3" Font-Bold="True"
        Font-Names="Verdana" Font-Size="Medium" Height="31px" Width="146px"></asp:TextBox
    <br />
   </form>
</body>
</
html>

Color Picker Sample

colorpicker 1.gif

 

Now you have to enter some text in the required field and then select the color from the color palate and accordingly the font color of the textbox will be changed.

colorpicker2.gif

After color change the output will look like this.

colorpicker3.gif

After selecting the color , if you enter text in another textbox the font will be appear in that color. Lets see below how does it work.
This is all about I will trying to explain you.

colorpicker4.gif

This is all about I will trying to explain you.
 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.