CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1477886
user1477886

Reputation: 263

How to show indicator of loading?

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?

Upvotes: 1

Views: 538

Answers (2)

coolguy
coolguy

Reputation: 7954

Change your html to 

<span id='ajaxBusy' style="z-index:99999;"><img class='indicator'  src='/ajax-loader.gif'>
</span>

And your jQuery to:

$('body').delegate('.page_button','click',function() {

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

Upvotes: 0

SVS
SVS

Reputation: 4275

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 */
}

Upvotes: 1

Related Questions