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>
<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
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.
After color change the output will look like this.
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.
This is all about I will trying to explain you.