CODEWITHSUNDEEP
jquerycsswordpress
user1906399
user1906399

Reputation: 771

how to hide the background of the gif image when it is not being displayed?

I have a simple contact form 7 with little look change via css. the code of the form is as below:

<form action="/medical/#wpcf7-f13-o1" method="post" id="index-appointment-form" class="wpcf7-form col-md-7 col-lg-6 invalid" novalidate="novalidate">
    <div style="display: none;">
        <input type="hidden" name="_wpcf7" value="13">
        <input type="hidden" name="_wpcf7_version" value="3.8.1">
        <input type="hidden" name="_wpcf7_locale" value="en_US">
        <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f13-o1">
        <input type="hidden" name="_wpnonce" value="d4ff0cd447">
    </div>

    /*here are codes for input elements*/

    //and below is the code for submit button and gif image and validation status 

    <p>
        <input type="submit" value="Make an appointment now" class="wpcf7-form-control wpcf7-submit btn btn-block btn-default">
        <img class="ajax-loader" src="http://localhost/medical/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
    </p>
    <div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">
        Validation errors occurred. Please confirm the fields and submit it again.
    </div>
</form>

workflow is if i click submit button gif image is shown at the buttom of the submit button(with the appearence of width and height attributes of 16px, 16px in img tag) , until the validation status message shows up. When status message shows up gif image disappears.

The problem is even there is no gif image being shown the background is always there before the click event and after the click event , and so there is always an unwanted empty gap below the submit button.

I tried using .ajax-loader{display:none;} , but then both the background and image are not showing up when i click the button. Even i tried .show() in jquery , nothing is showing up.

Basically i want there is no unwanted gap created by gif loader image when there is no image. Is there any solution?

Upvotes: 0

Views: 1136

Answers (2)

pavlindrom
pavlindrom

Reputation: 393

On the ajax-loader element, change the style from visibility: hidden to display: none. In order to show the element, set the style to display: block.

If visibility: hidden is set elsewhere, just set it to visibility: visible for the current element.

Make sure that when you hide the spinner, you use display: none (which should be the default for $(".ajax-loader").hide().

Upvotes: 1

Wissam El-Kik
Wissam El-Kik

Reputation: 2525

"visibility:hidden" will hide the element but the element's block will still be visible because there's a width and a height. The jQuery "show()" function works with the CSS "display" property, not the "visibility" property.

This jQuery code will solve your problem:

$(".ajax-loader").css("visibility", "visible");

The best solution would be to rely on the "display" property only :

CSS:

.ajax-loader {display:none; visibility:visible;}

JS:

$(".ajax-loader").show();

You need to add the JS code when the user clicks on the button.

In another hand, the "visibility" CSS property isn't really useful in your case. You can get rid of it if you want.

Upvotes: 1

Related Questions