Replace button with a loading gif

Question

Im trying to replace the submit button with a loading.gif but I cannot in anyway put it in the same place. It looks like that the button is hidden but the space is still reserved.

My html is

<div class="botao">
  <input type="image" disabled src="images/bl_button.jpg" id="bt_pagamento" alt="EFETUAR PAGAMENTO" title="EFETUAR PAGAMENTO" /> 
</div>
<div class="loading">
  <input type="image" src="images/loading.gif" id="bt_loading" alt="CARREGANDO PAGAMENTO" title="CARREGANDO PAGAMENTO" />
</div>

My jQuery code is:

$("#bt_pagamento").click(function () {
                                      $(this).css({'display':'none'});
                                     $("#bt_loading").show();
                });

And my CSS is:

#main_content .pagamentos .botao {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

#main_content .pagamentos .loading {
width: 151px;
height: 33px;
float: left;
margin: 20px 0 20px 325px;
text-align: center;
}

Could someone give me some help on it?

have you tried something like this? http://jsfiddle.net/RtMKz/ — Pedro Estrada, May 21 '13 at 13:55
We need to see the larger context—preferably the whole page with all the CSS. — ralph.m, May 21 '13 at 13:58
I can see the "loading image" after press the submit. My only problem is how to put it exactly in the same place that the button was. Remembering that the button is a floating button, so it can be in different places. I believe that exist a CSS trick to do it, but i dunno how. — Marcelo Srougi, May 21 '13 at 14:04
In the past, I've just grabbed the size/position from the button element then put the image at the same size/pos, making it sit in front with z-index. Since you can catch the click event from the button and handle it, you already have access to the button element. Otherwise, you can find it with its id. I'll see if I can't whip up a quick sample if you'd like. — enhzflep, May 21 '13 at 14:10
enhzflep: I just tried to put them at exactly the same place in CSS and left the button with z-index:1 and the loading with the z-index:2. But it is still showing the loading below the space where the button was. — Marcelo Srougi, May 21 '13 at 14:30

Axel · Accepted Answer · 2013-05-21T14:35:17.443

3

I think the best solution is instead of adding a seperate "loading" element, just add a class to your button that makes the button appear as a loading icon.

For example: http://jsfiddle.net/4rLgw/1/

HTML:

<div class="botao">
   <button id="bt_pagamento" class="bl_button" title="EFETUAR PAGAMENTO"></button>
</div>

CSS:

.bl_button {
    background: url('images/bl_button.jpg') no-repeat 50% 50%;
    height: 35px; /* height of your button image */
    width: 100px; /* width of your button image */
}

.button_loading {
    background: url('images/loading.gif') no-repeat 50% 50%;
    /* apply other styles to "loading" buttons */
}

jQuery:

$("#bt_pagamento").click(function () {
    $(this).addClass('button_loading');
});

Here is a working example: http://jsfiddle.net/4rLgw/1/

When the button is clicked, the .button_loading class is applied to the button, and the background image is changed to the ajax loading icon. You can also add specific styling to the loading button to make it look more unique.

edited May 21 '13 at 14:35

answered May 21 '13 at 14:25

Axel

10,732
2
30
43

So obvious, yet here I sit with 49 lines of html css and js I played with. Gets my vote. – enhzflep May 21 '13 at 14:37
The problem is that my bl_button.jpg (that had the "disable src" status) is replaced by the enviar_pagamento.jpg, as you can see below: `` $("#bt_pagamento").attr('src', 'images/efetuar_pagamento.jpg'); $("#bt_pagamento").removeAttr('disabled'); $("#bt_pagamento").hover(function () {`` So how would I proceed? Thanks. – Marcelo Srougi May 21 '13 at 14:52
The same principles apply. You can still add the `disabled` attribute using jQuery, and even add another class to style disabled buttons. Like this: http://jsfiddle.net/4rLgw/2/ – Axel May 21 '13 at 14:57

Replace button with a loading gif

1 Answers1