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:
Image 1.
Image 2.
Image 3.
Image 4.
Image 5.