What is the best way to use jQuery to toggle the visibility of a background?

Check out my CSS below:

#load-icon
{
    background: url(/Images/loaders/mask-loader.gif);
    background-repeat: no-repeat;
    z-index: 99; width: 32px; height: 32px;
    z-index: 99; 
    margin-top: 9px;
    margin-bottom: 9px;
    margin-right: 5px; 
    display: none;
}

I've been using this code to show and hide it:

$(document).ajaxStart(function () {
    $('#load-icon').show(500);
});
$(document).ajaxStop(function () {
    $('#load-icon').hide();
});

However, when hidden, #load-icon doesn't take up space due to the background, which is not the desired behavior.

Is there a way for #load-icon to always occupy 32px of space while making the GIF visible or invisible? I don't mind removing the fade-in or fade-out effects.

Take a look at this fiddle to see where it's used: fiddle

Update: I need a solution that doesn't involve toggling the background image. I want the GIF to remain visible or invisible without specifying its name in the JavaScript, as I may be using different CSS styles.

jqueryhtmlcss

Answer №1

If you want to remove the background using jQuery, you can do it like this:

$(document).ready(function(e) {
    var originalBackground = $('#element-id').css('background');
    $('#element-id').css('background','none');

    $(document).ajaxStart(function () {
        $('#element-id').css('background', originalBackground);
    });
    $(document).ajaxStop(function () {
        $('#element-id').css('background','none');
    });
});

Answer №2

$(document).ready(function () {
    $('#load-icon').fadeIn(0);
});
$(document).ajaxComplete(function () {
    $('#load-icon').fadeOut(0);
});

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

Customizing a Bootstrap tooltip balloon to align perfectly with just an outline

In an effort to create a custom tooltip balloon, I have decided to override some of the default Bootstrap styles in my project. Here is the CSS code I am using: /*overriding bootstrap*/ .tooltip-inner { border: 1px solid #0ad; background: #FFFF ...

htmlcsstwitter-bootstraptwitter-bootstrap-tooltip

Using JQUERY to locate checkboxes within a specified jQuery SELECTOR based on a partial match of a string present in the OnClick Attribute

Our latest challenge with JQUERY involves finding checkboxes in a JQuery SELECTOR by matching part of a string within the OnClick Attribute. Finding checkboxes based on NAME or ID is easy, but our application generates HTML with checkboxes like this: <i ...

jquerycheckboxonclickattributesselector

Using Spring MVC to send an object from the view to the controller via jqGrid

I recently started using jqGrid in conjunction with Spring MVC. In order to capture the parameter, I implemented the following: @RequestMapping(value = "/approveOperators", method = RequestMethod.POST) public @ResponseBody StatusResponse approveOperators( ...

jqueryspring-mvcjqgrid

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

Flickering Button Displayed After Fade-In Animation

After scouring the internet for a solution, I still can't seem to figure out why my code isn't working. Whenever an element fades in on Safari, it quickly flickers or flashes white, almost like a rapid refresh is happening. I've tried vario ...

csswordpresssafariwebkit

Image broken on default bootstrap navbar

On my computer where I am developing a Ruby on Rails app, I have a relative link to an image. To customize the style, I am using Bootstrap and have used their code to source the image for the top left brand placement. You can view the Bootstrap link here. ...

htmlcssruby-on-railstwitter-bootstrap

What is the method to extract the value of $r['id_usr'] from a select tag in PHP and store it in a variable?

Is there a way to retrieve the option value from a select tag using $r['usr_id'] when submitting it in order to utilize that value in a php query? Below is an example of my code : <pre> <div class="form-group"> & ...

phpjqueryhtml

Difficulty arising from the final column of average sums - Information extracted from JSON using Angular JS

I am facing a problem with calculating the average total. I need to determine the average sum using a specific formula, but the code provided does not calculate the last column of Average. I am looking for a desired result and would appreciate any assistan ...

javascriptjqueryangularjssumaverage

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

Is it possible to connect ng-model with a style tag?

Is it feasible to create a basic template editor using angularjs where an input field with an ng-model can be connected to a style tag to control the css on an entire page rather than applying it to a specific element with inline styling? Could something ...

javascripthtmlcssangularjs

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

I'm currently working on integrating a chat feature into my Angular Firestore and Firebase app. Everything seems to be functioning well, except for one issue - whenever a new message is sent or received, the screen automatically scrolls up and gets st ...

htmlangulartypescriptangularfireionic5

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened. To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to ...

javascripthtmlcssbootstrap-5accordion

Styling Your Website: Embrace CSS or Stick with Tables?

My goal is to create a layout with the following features, as shown in the screenshot: The main features include: The screen is divided into 3 regions (columns); The left and right columns have fixed widths; The middle column expands based on the browse ...

htmlcss

Loop through each item in the JSON object

After making an ajax call, I receive a json object in the success callback with the following structure: {test 1: Array(2), test 2: Array(3), test 3: Array(2)} The arrays inside each key have elements that look like this: 0: {IdProduct: "1", ProductName ...

javascriptjquery

Tips for displaying HTML elements beyond the boundaries of an iframe

Similar Inquiry: How can content from an IFRAME overflow onto the parent frame? I am in search of a potential solution for the following issue: There is a specific element with the style "position: absolute" within a page loaded into an iframe. Based ...

htmlcssiframexhtml

Looking for a new slider option to replace the traditional Conveyor belt slideshow?

I have successfully used the Conveyor belt slideshow script from http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm. Now, I am looking to find another script that works similar to this one. Does anyone have any recommendations for a tool that ...

javascriptjquery

Show an image based on a query parameter

Currently, I am developing a PHP project and I am facing an issue with loading an image from a query string. Here is the code snippet I am using: <img src="load_image.php?name=Profile_Photo_Small" /> Is there anyone who can help me out with this pro ...

phphtml

Developing an unchanging structure for HTML pages

I need assistance in designing an HTML layout with a fixed toolbar at the top and bottom, along with a single centered DIV that should be responsive when the user resizes the window both vertically and horizontally. I have attached a mockup/screenshot fo ...

csshtmllayout