how to change css styles of custom jquery widget?

Question

this is my code so far I tried.I create a wiget it contain a textarea with row lines. I want to change this widgets backround color for Onfocus and OnfocusOut evets. how to do that?

<!doctype html>
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Widget - Default functionality</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>           

   </head>
   <body>

          <script>
         $(function() {


            $.widget("iP.MultilineText", {
                _create: function(){
                    this._textarea = $("<textarea rows ='5'>");

                    this._textarea.css("background-size","100% 13px");
                    this._textarea.css("border","none");
                    this._textarea.css("font-size","12");
                    this._textarea.css("line-height","12px");
                    this._textarea.css("background-image","linear-gradient(#33ccff, #33ccff 12px, #ffffff 12px, #ccc 13px, white 13px)");
//                    this._textarea.css("focus{outline: none;}"");
                    this._textarea.focus(function(){
                        this._textarea.css('background-color':'yellow')}); //<---- this is the //palce the code should come to change color while focus

                    this._textarea.focusout(function(){alert('focust out')});
                $(this.element).append(this._textarea);
                } 
            });

            $("#mulText").MultilineText();         

         });
      </script>

          <div id="mulText" ></div>

   </body>
</html>

Cerlin · Accepted Answer · 2014-11-07 09:28:17Z

1

You can use the below code for both focus and focusout

this._textarea.focus(function(){
    $(this).css('background-image','linear-gradient(rgb(255, 255, 0), rgb(255, 255, 0) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')}); 

this._textarea.focusout(function(){
    $(this).css('background-image','linear-gradient(rgb(51, 204, 255), rgb(51, 204, 255) 12px, rgb(255, 255, 255) 12px, rgb(204, 204, 204) 13px, white 13px)')
});

answered Nov 7, 2014 at 9:28

Cerlin

6,7321 gold badge23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Azad Over a year ago

How to get the text of this widget?

Azad Over a year ago

in this widget only one in my application i have to add multiple instances of this widget.

X A · Accepted Answer · 2014-11-07 09:24:21Z

1

you need to change this to $(this) in your focus function and backgroun-image property is blocking you backgound-color. so you need to put $(this).css('background-image','none');

            this._textarea.focus(function(){
                $(this).css('background-image','none'); // add this
                $(this).css('background-color','yellow');
            }); //<---- this is the //palce the code should come to change color while focus

answered Nov 7, 2014 at 9:24

X A

83713 silver badges25 bronze badges

1 Comment

Cerlin Over a year ago

$('textarea').val() will give you the value

Collectives™ on Stack Overflow

how to change css styles of custom jquery widget?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related