jQuery: Color Picker - Change Background Color at Run Time

Rahul Kumar Saxena
Apr 05, 2016

13.1k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Bookmark

CustomColorPicker jQuery.zip

Here is my aspx code

<%@PageLanguage="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:TextBoxID="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:TextBoxID="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:TextBoxID="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:TextBoxID="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:

page

Next Recommended Reading Select Multiple Dates in jQuery Date Picker