Change the background color of div using Jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.  

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.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon