Question

I have following CSS code for indicator of loading:

.indicator {
    display:none;
    margin:0px;
    paddingLeft:0px;
    paddingRight:0px;
    paddingTop:0px;
    paddingBottom:0px;
} 

Indicator HTML code:

<img class='indicator' id='ajaxBusy' src='/ajax-loader.gif'>

And following code for showing indicator:

$('.page_button').live('click',function() {

    $('#ajaxBusy').show();
    $.post("url",
        function(data)
        {
            if (data != "") 
            {
                //some actions      
            }
            $('#ajaxBusy').hide();
        });
}); 

It code works good, but there is some little details: when the indicator appears then other content of page under it move down one line. When the indicator disappers then this line disappears too. I want to delete it. How can I do it?

Answer 1

Add position:absolute; & z-index:99; to .indicator class.

.indicator {
  display:none;
  margin:0px;
  paddingLeft:0px;
  paddingRight:0px;
  paddingTop:0px;
  paddingBottom:0px;
  position:absolute; /* Add This */
  z-index:99;  /* Add This */
}