0

I am having similar issue as posted here.. During Ajax request, I am trying to put background image of loading icon and greyed background, somehow the greyed background does not extend to the bottom of the page. As I scroll, it goes away. I tried remedies suggested in that post, but none helped. I thought of re-insering a brand new div that covers entire body of html and have background-greyed with loading icon. But I really don't know how to do that. So the question is using Jquery

  1. I have my HTML with body that contain various elements.

  2. Make the current contents invisible or greyed out, put a new div that covers entire the body of HTML (basically on top of the current HTML body) and fill it with greyed-background

Any help?

Community
  • 1
  • 1
brain storm
  • 30,124
  • 69
  • 225
  • 393
  • 3
    Tried fixed positioning? – j08691 Apr 25 '14 at 20:21
  • 2
    proTip: whenever using ajax, and you don't want scrolling, on `beforeSend`, set `$('html, body').css('overflow', 'hidden !important')` to disallow scrolling. then in the `complete` or 'success' callback, simply reverse it, `$('html, body').css('overflow', '')` – SpYk3HH Apr 25 '14 at 20:22

2 Answers2

5

Basically, you will need a div that is hidden most of the time, preferable with display: none, and then you will call a $( ".coverAll" ).show(); when you want to cover the screen. The styles for the div are below. By z-index'ing the div ABOVE the rest of your content, you effectively hide that content behind it.

HTML:

<div class="coverAll">Loading...</div>

Css:

.coverAll {
    z-index: 1000;
    background-color: #CCC;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
Ben Roux
  • 7,308
  • 1
  • 18
  • 21
1

I use jQuery BlockUI Plugin for disabling user interaction with the page during ajax requests here's a link:

http://malsup.com/jquery/block/

Include the jquery.blockUI.js file, then add the following line to a script tag on the page:

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

User interaction will be blocked during all jQuery ajax requests on the page.

The link above includes several ways to customize. The example above uses all the defaults.

ShaneCoder
  • 66
  • 4