How to gray out the screen while DataTables is loading

newtodatatables

Is it possible to gray out the whole screen (web page) while datatables is loading? How do I go about doing it? I want to prevent users from clicking anything else that may screw up the loading of the DataTables. I am using server-side processing.

fbas

the simplest way would probably be to use one of the many "modal" pop-up box jquery tools. I particularly like FancyBox

http://fancybox.net/ or http://web.enavu.com/tutorials/top-10-jquery-modal-box-plugins/


by default, it allows the user to hit escape or click a link to close the pop-up, but you can disable that.

when the database has loaded (use one of the callback functions), call $.fancybox.close() to close the modal pop-up.

You could dive into the code and dig out how they set the overlay if you want to use it without having any pop-up message.

GregP

If you have never developed in JavaScript before, fbas' suggestion of using fancybox should work dandy. Fancybox is probably my favourite, too.

If you have even the smallest amount of experience, it should be pretty easy to write your own overlay. The actual transparent overlay part is just a div that covers the screen. I'd have to research what's considered "best practice" for these kinds of things, but the following CSS is an example of *one* way you could do it.

[code]
#overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%
z-index: 1001; // or a sensible number that will put it on top
background-color: rgba(33, 33,33,0.5);
}
[/code]

(note, I quickly used CSS3's ability to use RGBA colors; you might need to use a repeating transparent background image or something instead, for maximum compatibility)

Then you would write a simple bit of JavaScript (I would use jQuery since it's already on your page) to show the overlay when it's needed as well as close it from a callback function as per fbas' suggestion.