Loading ...

jQuery: Color picker to change the font color of textboxes | CodeAsp.Net

jQuery: Color picker to change the font color of textboxes

 /5
0 (0votes)

Few days back a person asked on the forums on how to show jquery color picker to change the font color of textboxes. I decided to write a blog on the solution which I gave to him. I have used  sgbeal-colorpicker for the color picker purpose. The user will select the color from the picker and accordingly the font color of the texboxes will be changed. Below is the sample code for it:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></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>
    <form id="form1" runat="server">
    <div id="MyDemoColorPicker1">
        <span class="ColorBlotch" style="background-color: transparent;">?</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(0, 0, 0);"></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>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox9" runat="server"></asp:TextBox>
    <asp:TextBox ID="TextBox10" runat="server"></asp:TextBox>
    </form>
</body>
</html>



Hope this helps!

Comments (no comments yet)

Top Posts