How can I modify the CSS styles for a custom jQuery widget?

I have been working on creating a custom widget with a textarea that has multiple rows. I am now looking to change the background color of this widget on the Onfocus and OnfocusOut events. Can anyone guide me on how to achieve this?

<!doctype html>
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Widget - Custom 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>

Answer №1

Feel free to utilize the following code snippet for handling both focus and focusout events

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

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

Answer №2

To resolve the issue, simply replace this with $(this) in your focus function. Additionally, the background-image property is conflicting with the background-color, so you should include

$(this).css('background-image','none');
.

            this._textarea.focus(function(){
                $(this).css('background-image','none'); // Add this line
                $(this).css('background-color','yellow');
            }); //<---- Place this code to change color when focused

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Assign the jQuery library to a variable

I've been attempting to load a script tag via ajax, and one way to achieve this is by appending it using the .html function in jQuery. Here's an example of what I tried: jQuery(document).ready(function($) { var flexsliderThumg = "jQuery(doc ...

What could be causing my Jquery fade effect to not function properly?

I'm new to incorporating Jquery into my website and I'm facing an issue with getting the first row of pictures to fade in (upwards) when scrolling. Despite my efforts, they are not behaving as expected. Any guidance on how to resolve this? HTML: ...

Creating a JQuery Dialog Box Integrated with DataTable()

I need some assistance with a problem I'm encountering while using Asp.net and JQuery UI 1.9.2. On my form, I have a textbox and a search button. Upon clicking the button, I query the database on the server side and store all the results in a Gridview ...

When bootstrap is imported, SVG is displayed with a square background

The combination of reactJS and bootstrap has caused an unexpected issue for me. After importing bootstrap, strange squares have started to appear behind my SVG images... https://i.sstatic.net/4vmP8.png Is anyone familiar with what is causing this and ho ...

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem. Your assistance is greatly appreciated, João var inputs = Array.prototype.slice.call(document.querySele ...

Library for React and validation

Summary: React offers controlled components and Higher Order Components (HOC) as the foundation for creating validation libraries in NPM. However, integrating with existing components like React Select and customizing error message placement can be a chall ...

How can you retrieve input values from a form using a button click but without requiring a

I am facing an issue with the delete button on my form. The form has three buttons - one to edit the form on another page, one to add a value on the existing page, and one to delete a value. While the submit and edit buttons work fine, I am struggling wi ...

Creating a specific type of table using Ruby on Rails

Is it feasible to create a table with two columns, where the left column incorporates multiple rows with a scroll bar, and the right column contains a large box housing buttons that alter based on the selection of blocks in the left column? ...

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Can anyone assist with implementing the following features in D3 JS? I need to fix the x-axis position so that it doesn't scroll. The values on the x-axis are currently displayed as numbers (-2.5, -2.0, etc.), but I want them to be shown as percentag ...

choosing concealed div

Struggling to target the span element within the initial item of an unsorted list, but struggling with getting the DOM structure right. <li class="chapterItem"> <a href="http://www.neuromanga.com/mangaReader.php?chapterNo=12&amp;#page ...

Include a character on the right side without shifting the text to the left

Below is the HTML code I am currently working with: <div class="last_img"> <p>Galutinė žetono išvaizda:</p> <span class="zetin11">A</span> <span class="zetin12">A</span> < ...

The width of the Bootstrap tooltip changes when hovered over

Currently, I am facing a peculiar issue with my angular web-application. Within the application, there is a matrix displaying data. When I hover over the data in this matrix, some basic information about the object pops up. Strangely, every time I hover ov ...

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

Encountering a 404 error when making a basic WCF request through IIS using jQuery

I'm facing an issue that seems to be a common one - I am trying to connect a WCF service hosted on local-IIS with an ASP.NET WebApp also hosted on local-IIS. The web app can successfully access the .svc file from the AJAX call below, but when I add /G ...

Transfer dynamically generated table data to the following page

Seeking guidance on a common issue I'm facing. I am creating a table using data from Firebase upon page load, and I want users to click on a row to view specific details of that item. It may sound confusing, but it will make more sense with the code p ...

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

Steps to include a horizontal divider in the footer section of an angular-material table

Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...

Implementing AJAX to populate a dropdown list: A step-by-step guide

I have a question about populating options in a select dropdown using AJAX. Can you spot any errors in my code? Below is the snippet from my View: $(function() { $.getJSON("Animes/GetCategories", null, function(data) { var options = '&a ...

How can I use jQuery to send data through a URL?

Looking for a way to utilize the URL provided below to dynamically send SMS messages to users who sign up through a form. The form includes: <input type="tel" name="usrtel"> Upon form submission, I aim to have the value of <input name="usrtel"& ...

Ensure that the tab's content fills up the entire space provided and prevent the need for a vertical scrollbar to appear

Is there a way to make the tab content take up 100% of the available space without causing a vertical scroll due to the height of the tab itself? I am currently using ng-bootstrap and need assistance with this specific issue. You can review my code in the ...