I have searched quite a bit online. And can't really find an answer. I did implement a solution using window.setTimeout, but doesn't really seem to work. Here is what I want. I click a button and run about 10 javascript functions all together. These are time intensive functions that connect back and fourth to MySQL grab data and stuff. And adds fields (dropdowns/text fields/checkboxes etc.) on the page using AJAX. Now, while this is happening I would like to show a message saying "Please wait..." and let the server process whatever it's processing. Using settimeout doesn't really do much, but freezes ALL the processing for the given amount of time....which doesn't really make sense since nothing is being processed in the background. Unless I am implementing it wrong. While this is happening I would like to DISALLOW user to click ANYTHING at all on the page. Now I know this is very much possible, because I have used it on many sites. Can anyone please help? I am using PHP/Javascript. Thanks in advance.
Set up a div that is absolutely positioned (I usually add opacity so the user gets the idea that they aren't able to click on the page).It could also have a background property that specifies an image that has a spinning gif that also says loading ... or whatever you want the message to be. You also have a class on the div that is just to hide the div. When you call one of your updating functions (the functions that talk to the server and add content) you remove the class "hideMe" from the loading div. Then in the success function (the function that handles the response from the server) you reapply the "hideMe" class to the loader div.
<style>
#loaderDiv{
position:absolute;
height:100%;
width:100%;
opacity:0.6;
filter:alpha(opacity:60); /* this is for IE */
z-index:30;
}
.hideMe{
display:none;
}
</style>
<div id='loaderDiv' class='hideMe'> </div>Great idea..I have implemented it..in somewhat of a different way. I just create a div element (instead of embedding a div tag in the body) and add it to the body. But one thing I am having issue with is...when I bring up the above "please wait" screen...I can still scroll the bottom page (page that's being processed). Soo I was thinking that I should try to mask the entire CURRENT screen and disable the scrollbars for the bottom page (page that's being processed). Would you know how to find the top-left most point (x/y coordinates) for the current screen (not 0/0 <- because this would mean the very top-left point)? So when I click on a button it actually "masks" the entire CURRENT screen. And then I can even disable the scrolls using window.scrollbars of the bottom page.
You could just apply a class to the scrolling element (if you don't have a wrapper div then just apply to body) that has the css properties
.disabledScroll{overflow:hidden;}. Then when you remove the loader you just remove that class. You could also just dynamically set the height of the loading div to the height of the entire page (not just the viewable part) so that even with scroll the loader covers the page. To get the height and width of an element use offsetHeight, offsetWidth for example:
var pageHeight = document.getElementById("pageWrapper").offsetHeight;We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.