Eliminating and restoring the background in a form field when it is in focus

/* This function clears the default text in a field when clicked on */
$('#edit-field-activity-notes-und-0-value')
    .each(function() {
        $(this).data('default', this.value);
       var mybackground = $(this).css('background'); 
    })
    .focusin(function() {
        // If the value is the default, clear it
        if ( this.value == $(this).data('default') ) {
            this.value = '';    
            $(this).css( 'background', 'white');   
        }
    })
    .focusout(function() {
        // If the value is empty, revert back to the default value and background
        if ( this.value == '' ) {
            this.value = $(this).data('default');
           this.css = $(this).css ('background', mybackground); 
        }
    });

What exactly is happening here? $(this).css( 'background', 'white'); successfully changes the background color but retains other styling attributes like no-repeat

The lines marked with ** are not functioning as intended.

jquerycssforms

Answer №1

In my opinion, the modification required is:

 this.css = $(this).css ('background', mybackground);

This should be replaced with:

 $(this).css ('background', mybackground);

Answer №2

The scope of your mybackground variable is not within the focusout function, and assigning a variable to the result of $.css() is unnecessary.

Additionally, it would be better to set the background-color property instead of just background, as using background will reset all unspecified background properties (such as background-repeat, background-image, etc) to their default values. You can try this revised code:

var mybackground;
$('#edit-field-activity-notes-und-0-value').each(function() {
    $(this).data('default', this.value);
    mybackground = $(this).css('background');
})
.focusin(function() {
    if (this.value == $(this).data('default')) {
        this.value = '';    
        $(this).css('background-color', 'white');   
    }
})
.focusout(function() {
    if (this.value == '') {
        this.value = $(this).data('default');
        $(this).css('background-color', mybackground);
    }
});

Answer №3

/* This script clears the default text in a field upon entry */
$('#edit-field-activity-notes-und-0-value')
    .each(function() {
        $(this).data('default', this.value);
    })
    .focusin(function() {
        if ( this.value == $(this).data('default') ) {
            this.value = '';    
            $(this).css('background', 'none');               
        }
    })
    .focusout(function() {
        if ( this.value == '' ) {
            this.value = $(this).data('default');  
            $('#edit-field-activity-notes-und-0-value').css('background', 'url(sites/all/themes/bartiksub/images/add-message.png) no-repeat center center');
            }else{
            $('#edit-field-activity-notes-und-0-value').css('background', 'url(sites/all/themes/bartiksub/images/add-message-after.png) no-repeat center center');
        }
    });

This approach is necessary because the image path is written directly into the element, not the CSS file. Therefore, the path must start from the root of the site for Drupal sites.

When restoring the original content saved in the variable, it's crucial to include the missing part of the path to ensure proper functionality.

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

Alert message in jQuery validation for the chosen option value

I am attempting to validate a combo box with the code provided below. Currently, I receive multiple alert messages even if one condition is true. My goal is to only display one alert message when a condition is met and highlight the other values in red. Th ...

javascriptjqueryhtmlcssvalidation

When an anchor surrounds a div tag, white borders will appear

Lately, I've encountered an unusual issue. My buttons are created using div tags with rounded edges and border colors defined in the CSS. To link them to specific destinations, I encapsulated them within <a> tags. The problem arises when the li ...

cssjoomlagoogle-chrome

Ways to identify when all images have been loaded during a dynamic page load

I am trying to load a page with images into a div element. I need to find out when all the images on that dynamically added page have finished loading. $("#main").load('imagespage.php', function(){ alert("Page loaded"); }); The problem is that ...

javascriptjquery

Having difficulty with closing an HTML dialog using Selenium Webdriver in Java

Here is a snippet of my HTML code where I am attempting to use Selenium WebDriver to close a dialog box. <div class="ui-dialog dialog "> <div class="od-ui-dialog-content dialog_content"> <div class="od-ui-dialog-box ui_dialog_bo ...

javajqueryselenium

What causes errors in my AJAX request based on the particular file extension?

Utilizing JavaScript and jQuery, I have a function that loads data using $.get(url, function(response){ /* ... */});. The data is retrieved from a text file and handled within the response function of the JavaScript. Recently, I encountered an issue on my ...

javascriptjqueryajaxapachefile-extension

Seamless transition between various divs with a fluid blending effect

I am currently working on a list with four links that switch between different divs, and it is functioning well. However, I would like to enhance the user experience by adding a smooth blend effect when transitioning between the divs. At the moment, the an ...

jqueryfade

Issue with MVC framework: AJAX query callback function not functioning properly

Struggling with implementing a basic Jquery Ajax callback: Here is my Jquery code snippet: $(document).ready(function () { $('#btnClient').click(function (e) { e.preventDefault(); var txtClient1 = $('#txtCli ...

javascriptc#jqueryajaxasp.net-mvc

Omit any items from an array that do not have any child elements

Upon receiving data from the server in the format of a flat tree, I proceed to transfer this data to the JsTree library for tree building. Before sending the data to JsTree, I filter out any empty elements of type "folder" that do not have children. Below ...

javascriptjqueryjsonrecursionunderscore.js

Encountering a problem creating a hover overlay effect on a transparent PNG image within a parent div that has a background color

I'm struggling with creating an overlay hover effect on an image that has transparency. The issue I'm facing is that the black background of the parent div element is filling in the transparent parts of the PNG image, making it look like those ar ...

htmlcsspngoverlaytransparency

How can Bootstrap be utilized for Image Overlay?

I'm currently using bootstrap and have a 3x3 grid of 200x200 images. I've searched everywhere for a solution to add an overlay, but haven't had any luck so far. I'm still new to coding and trying to figure things out. I saw on Serenbe. ...

htmlcssoverlay

Failure to achieve success with jQuery Ajax

success in my AJAX call is not triggering at all, leaving me puzzled as to why. None of the alerts specified in the AJAX file are appearing. The form: <form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg"> <label ...

javascriptjqueryajax

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

Populate Jquery datatables programmatically

After implementing the Jquery Datatables plugin, I initially had hardcoded content in the table. However, I made some modifications to dynamically populate the table with fetched data. While this change worked fine, I encountered issues with the search f ...

javascriptjquerydatatable

Is there a way to speed up the refresh or loading of data when using the Jquery Load function?

I've encountered a delay in loading data from my web application using the Jquery Load function. Although it functions correctly, the time taken to retrieve data from the database is too long. Here are snippets of my code; <div id="Records&qu ...

phpjqueryload

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Once this code is executed, Javascript ceases to function

I have developed a code snippet to create a typing effect similar to a command console. While the code is functioning well on its own, any additional code I add after it seems to malfunction. I've spent quite some time troubleshooting this issue witho ...

javascriptjquery

Learn the process of obtaining a location and showcasing it on Google Maps

I am working on creating a program that utilizes modernizer to ask for the user's location and then displays it using Google Maps. So far, I have been able to use geolocation to determine the coordinates of the user's location and attempted to in ...

javascriptjquerygoogle-maps-api-3

Sliding through sections with a full-screen vertical gap using the Slick Carousel

I have implemented the slick carousel plugin from here with vertical slides and I am using jQuery to adjust the height of the section to fill the entire screen. However, I seem to be facing a peculiar issue where on sliding to the 4th and 5th slide, the b ...

jqueryslick.js

Validating emails using angular material chips

I'm currently working on implementing a form that utilizes input chips to facilitate sending messages to multiple email addresses. While I've made progress in making the form functional, I'm facing difficulties in displaying error messages w ...

htmlangulartypescriptformsvalidation

Enhance the efficiency of DataTable by optimizing cell class modifications

I have been very pleased with the performance of jquery DataTables, but I have encountered a situation where I need to optimize it further. Specifically, I am updating the class of a cell based on its data. Currently, I am achieving this by using the ren ...

javascriptjqueryperformancedatatablesstyling