Change the background color of div using Jquery

In this article I am going to explain how to change the background color of div using jquery.


Description:
I want to change the background of a particular area (div).  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" />
    <style>
    #section
    {
        margin-top:20px;
        width:300px;
        height:300px;
    }
    </style>

  <script>
        $(document).ready(function () {
            $('#txtcolor').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
            })

                        .on('change.color', function (evt, color) {
                            $('#section').css('background-color', color);
                        })
                        .on('mouseover.color', function (evt, color) {
                            if (color) {
                                $('#section').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" />
    <style>
    #section
    {
        margin-top:20px;
        width:300px;
        height:300px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">  
    <fieldset style="width:310px">
    <legend>Change Background Color of div Example</legend>   
            <asp:TextBox ID="txtcolor" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Change Color" />
      <div id="section" runat="server">
      </div>
    </fieldset>
    </form>
    <script>
        $(document).ready(function () {
            $('#txtcolor').colorpicker({
                initialHistory: ['#ff0000', '#000000', 'red']
            })
                        .on('change.color', function (evt, color) {
                            $('#section').css('background-color', color);
                        })
                        .on('mouseover.color', function (evt, color) {
                            if (color) {
                                $('#section').css('background-color', color);
                            }
                        });
        });
</script>
</body>
</html>

Build, run the project and test it.

Demo:
Change the background color of div using Jquery

   In this article we have learn how to change the background color of div using Jquery. 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.  

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget