In
this article I am going to explain how to change the background color of
webpage using colorpicker jquery in asp.net.
In
the previous article I have explained how to open image in popup on thumbnailclick using Jquery and how to search the record and highlight in Gridview usingAsp.net.
Description:
I
want to change the background of webpage. To fulfill this requirement I am using evol
colorpicker Jquery.
Implementation:
I
have added textbox and button control to webform.
Add
the reference of script and CSS before closing head tag.
<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="js/evol.colorpicker.js" type="text/javascript"></script>
<link href="css/evol.colorpicker.css" rel="stylesheet"
type="text/css"
/>
<script>
$(document).ready(function () {
$('#txtcolor').colorpicker({
initialHistory: ['#ff0000', '#000000',
'red']
})
.on('change.color', function
(evt, color) {
$('#body').css('background-color', color);
})
.on('mouseover.color', function
(evt, color) {
if (color)
{
$('#body').css('background-color', color);
}
});
});
</script>
Complete
HTML markup of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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="js/evol.colorpicker.js" type="text/javascript"></script>
<link href="css/evol.colorpicker.css" rel="stylesheet"
type="text/css"
/>
</head>
<body id="body"
runat="server">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtcolor" runat="server"></asp:TextBox><asp:Button ID="Button1"
runat="server"
Text="Change
Color" />
</div>
</form>
<script>
$(document).ready(function () {
$('#txtcolor').colorpicker({
initialHistory: ['#ff0000', '#000000',
'red']
})
.on('change.color', function
(evt, color) {
$('#body').css('background-color', color);
})
.on('mouseover.color', function
(evt, color) {
if (color)
{
$('#body').css('background-color', color);
}
});
});
</script>
</body>
</html>
On
button click write the below given code:
C# code:
protected void Button1_Click(object
sender, EventArgs e)
{
body.Attributes["bgcolor"] = txtcolor.Text;
}
VB code:
Protected Sub Button1_Click(sender As
Object, e As EventArgs)
body.Attributes("bgcolor") = txtcolor.Text
End Sub
Build,
run the project and test it.
Demo:
In this article we have learn how to change the background color of webpage using Jquery in asp.net (C#, VB.net). I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email.
What do you think about this article?
If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.
EmoticonEmoticon