Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

jQuery Color Picker - Change Web Page Back ground color at run time

Article:
Viewed:  709 
Posted On:  3/6/2016 10:29:04 PM 
Custom jQuery Color Picker in asp.net 

Here in this article I am going to explain how we can set web page back ground color at run time like as we do for gmail label .

Below is my aspx code for this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorPicker.aspx.cs" Inherits="CustomColorPicker_jQuery.ColorPicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery: Color Picker</title>
    <link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css"
             type="text/css" media="all" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
    <script src="Script/evol.colorpicker.js" type="text/javascript"></script>
    <link href="CSS/evol.colorpicker.css" rel="stylesheet" type="text/css" />
 
     <script>
        $(document).ready(function () {
            $('#txtpickcolor1').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
            })
                        .on('change.color', function (evt, color) {
                            $('#div1').css('background-color', color);
                        })
                        .on('mouseover.color', function (evt, color) {
                            if (color) {
                                $('#div1').css('background-color', color);
                            }
                        });

            $(
'#txtpickcolor2').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
            })
                       .on('change.color', function (evt, color) {
                           $('#div2').css('background-color', color);
                       })
                       .on('mouseover.color', function (evt, color) {
                           if (color) {
                               $('#div2').css('background-color', color);
                           }
                       });
 
            $('#txtpickcolor3').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
           })
                      .on('change.color', function (evt, color) {
                          $('#div3').css('background-color', color);
                      })
                      .on('mouseover.color', function (evt, color) {
                          if (color) {
                              $('#div3').css('background-color', color);
                          }
                      });
 
            $('#txtpickcolor4').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
            })
                      .on('change.color', function (evt, color) {
                          $('#div4').css('background-color', color);
                      })
                      .on('mouseover.color', function (evt, color) {
                          if (color) {
                              $('#div4').css('background-color', color);
                          }
                      });
        });
    </script>
</head>
<body id="body" runat="server">
    <form id="form1" runat="server">
        <table style="width: 100%; border: solid 5px blue;">
            <tr>
                <td style="text-align: center; background-color:deepskyblue; color:white; font-weight:bold; font-size:14pt;">
                            Custom Color Picker using jQuery</td>
            </tr>
        </table>
        <table style="width: 100%; border: solid 2px gray;">
            <tr>
                <td style="width: 50%; height: 120px; border: solid 2px gray;">
                    <div id="div1" style="height: 200px;">
                        <asp:TextBox ID="txtpickcolor1" runat="server"></asp:TextBox>
                        <p>
                            .NET Core is a set of runtime, library and compiler components.
                            Microsoft uses these components in various configurations
                             for device and cloud workloads. You can do the same for
                            your app or service.
                        </p>
                        <p>
                            .NET Core is versatile in multiple scenarios, from client applications, across web,
                            server workloads to mobile apps. With its "pay as you go" model,
                             .NET Core can be adapted easily to perform great and provide a
                            rich experience developing for each of these.
                        </p>
                    </div>
                </td>
                <td style="width: 50%; border: solid 2px gray;">
                    <div id="div2" style="height: 200px;">
                        <asp:TextBox ID="txtpickcolor2" runat="server"></asp:TextBox>
                        <p>
                            Managed runtimes make code easy to write and guarantee safe execution.
                            .NET Core manages memory with a garbage collector,
                            compiles your code with a JIT compiler or ahead of time with .NET Native.                        </p>
                        <p>
                            .NET Core is backed by an open ECMA standard that outlines all of its capabilities
                            which can be used to make a new reference implementation.
                            A lot of projects did exactly this, and there are various
                             implementation out there, Mono and Unity being the most popular, non-Microsoft ones.
                        </p>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="width: 50%; height: 120px; border: solid 2px gray;">
                    <div id="div3" style="height: 200px;">
                        <asp:TextBox ID="txtpickcolor3" runat="server"></asp:TextBox>
                        <p>
                            You can create .NET Core apps that run on multiple OSes and CPUs.
                            .NET Core runs on Windows. Ports are in progress for Linux,
                            OS X and FreeBSD, as is integration with the LLVM compiler.
                        </p>
                        <p>
                            Runtime modularity allows for an extensibility model through a good set of abstractions
                            for adding new components to the actual runtime and its class library,
                             but also through its package manager NuGet, which allows for a powerful
                            componentization strategies.
                        </p>
                    </div>
                </td>
                <td style="width: 50%; border: solid 2px gray;">
                    <div id="div4" style="height: 200px;">
                        <asp:TextBox ID="txtpickcolor4" runat="server"></asp:TextBox>
                        <p>
                            .NET Core brings with it a set of languages,
                             led by C#, with VB and F# with support for modern language features,
                            like generics, Language Integrated Query (LINQ), async support and more.
                            It is backed by a managed compiler called "Roslyn" that is exposed to
                            the runtime, usable as a service.
                           
                        </p>
                        <p>
                            The managed runtime of .NET Core allows for a streamlined and easy
                             interoperability with native code through several ways.
                            Each of them allows for a rich set of scenarios not to mention great performance.
                        </p>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

 

Here I divided my web page in four sections:

1.png

Image 1.

2.png

Image 2.

 

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us