Skip to content
Share this..

Disable entire page and show translucent progress window

2008 July 24
tags: ajax, CakePHP, CSS, pagination, progress bar
by Eddie

Ever uploaded an image or iniated another timeful(slow) process on a webpage?

Some sites appear to fade out the whole window while a small loading bar appears.

windowfade2 300x249 Disable entire page and show translucent progress window

Loading Bar translucent overlay

This not only clearly indicates to users that the server is working in the background, but it is a great way to block the impatient click happy users as well.

Its a pretty straightforward effect done with javascript and css. CakePHP users can let Cake handle the JS.

The critical part is using CSS to create a translucent block that we can overlay on the page.

Ok so there is three key pieces to achieving this effect;

  • a hidden div that contains a standard loading bar(shows user we’re working)
  • a small translucent png image that we can repeat as a background(”fades-out” original page)
  • Ensuring the background we use covers the entire visible area in FF and IE.(Effectively blocks access)

    • I will explain the process in four steps, in the order I would recommend;

    1. Obtain our progress indicator and background images
    2. Create a hidden <div> element to show our images
    3. Use CSS to format the layout
    4. Use Javascript to turn the effect on /off

    The images

    • First you’ll need a nifty loading bar, or spinning globe, or spinning dots etc. If you don’t already have one you’d like to use, visit http://www.ajaxload.info/ to build your own.
    • Next you’ll need a small translucent image. If you don’t have photoshop, or gimp, than you may use my standard greyish translucent block found below. Don’t hotlink!, right-click and save as…transbg Disable entire page and show translucent progress window

    The hidden div

    //for cakephp users
<div id="LoadingDiv" style="display:none;">
		image('ajax-loader.gif'); ?&gt;</div>
//plain html
<div id="LoadingDiv" style="display:none;">
		<img src="ajax-loader.gif" alt="" /></div>

    the stylesheet

    /*the basics, and works for FF*/
#LoadingDiv{
	margin:0px 0px 0px 0px;
	position:fixed;
	height: 100%;
	z-index:9999;
	padding-top:200px;
	padding-left:50px;
	width:100%;
	clear:none;
	background:url(/img/transbg.png);
	/*background-color:#666666;
	border:1px solid #000000;*/
	}
/*IE will need an 'adjustment'*/
* html #LoadingDiv{
     position: absolute;
     height: expression(document.body.scrollHeight &gt; document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
	}

    The CSS above allows the div with the id LoadingDiv to lay on top of any other elements on the page. Its like when your teacher use to lay a spare piece of paper over a transparency to block the answers from shining through. Yes, that was a reference to overheads icon wink Disable entire page and show translucent progress window

    The javascript

    Note: those using CakePHP should first read this article in the bakery on advanced ajax pagination.

    var ldiv = document.getElementById('LoadingDiv');
ldiv.style.display='block';
/*Do your ajax calls, sorting or laoding, etc.*/
ldiv.style.display = 'none';

    Example: The CakePHP Pagination Call

    Those who are using CakePHP 1.2 undoubtedly know about its awesome pagination abilities. Well it can use ajax to complete the task, and we can assign our cool new blockout div as the progress indicator.

    			$paginator-&gt;options(
            array('update'=&gt;'PPaging',
                    'url'=&gt;array('controller'=&gt;'Posts', 'action'=&gt;$this-&gt;action,$project_id),
                    'indicator' =&gt; 'LoadingDiv'));

    Note:

    I tried to make this organized and clear, but we all think differently. So if you don’t understand anything, please comment below and I will work to dispel any confusion.

    from → CakePHP

    27 Responses leave one →
    1. mataichi permalink
      August 18, 2008

      This is exactly what I’ve been looking for. Thanks for the tutorial.
      A few issues I have come across…
      1) IE 6 & 7 are only blocking the top browser window size, meaning if I have a vertical scroll bar, when I scroll down the content is not blocked. Works fine in FF.

      2) IE 6 does not support PNG transparency, so IE 6 users will only see a completly dark overlay which blocks the page content.

      3)Depending on where I place the hidden div I get different parts of the document covered/uncovered. Where would you recommend placing the hidden div?

      Thanks for the information and effort, but I think it still needs some work to be a viable, cross-browser solution. If you look at any firefox addon ( https://addons.mozilla.org/en-US/firefox/addon/5203 ) and click any image from the “More Images” section this affect is implemented perfectly across browsers (that I’ve tried). I just wish I knew how they did it.

    2. Joel permalink
      August 19, 2008

      This was a very good explaination and demonstration of what i was looking to do! I was able to use your concepts and create what i wanted.

      To stop IE from having that issue i just used {left:0px; top:0px;}

    3. Robin permalink
      August 23, 2008

      This doesn’t work for me in at all. Tried in FF and IE, first a thought the JS doesnt work for me, but then i figured out that the CSS failed. I don’t know why because I’m not a pro, but when i remove the “margin” from the CSS, it show and hides the layer but its on the bottom of the page and not on the entire one.

      Maybe I just don’t get it, but for me… it doesn’t work :(

    4. Jimmy Liew permalink
      August 23, 2008

      Hi,
      appreciated if you can send me the full sample source code on how to create a fade out window and show progress bar. I do not have any knowledge about CakePHP framework or other php framework. But I do know little bit about javascript. Is it necessary to have php framework install for your sample?

    5. Eddie permalink*
      August 23, 2008

      Sorry, I have been busy with a move this week.

      @mataichi
      Thanks, I am glad this helped you out :)

      I *believe* the images from the link you shared are overlayed using the Lightbox JS library. It is a very handy tool for overlaying images across all browsers, have a look here, http://www.huddletogether.com/projects/lightbox/

      @joel
      Glad it was clear enough, And thanks for the nice tip.

      @Robin
      Where you put the div has alot to do with just what it will cover.
      I recommend having it at the very end, just before the </body> tag. This will ensure it is free to overlap any elements on the page.

      @Jimmy
      No, you do not need the CakePHP framework for this trick, but you will need to know enough Javascript to complete query or sorting operations on your own. The show/hide functionality relies purely on Javascript and CSS.

      To test it out, replace the html part as follows;

      <script>
function hideFunction(){
ldiv.style.display = 'none';
}
var ldiv = document.getElementById('LoadingDiv');
ldiv.style.display='block';
/*wait 5 seconds before 'unlocking' the screen.*/
setTimeout(showFunction,5000);
</script>

      That should show the page with the overlay initially, and then after 5 seconds hide the progress bar.

    6. Nat permalink
      August 25, 2008

      Thanks. Beautiful site. I’ll become your constant visitor.

    7. Eddie permalink*
      September 16, 2008

      @Nat
      Thanks..

    8. mataichi permalink
      October 15, 2008

      Ok, I’ve finally figured out how to block the screen in IE. Normal browsers will size the div to 100% including any scroll area. IE does not block any scroll area, so you can make the div “fixed” position. Of course, IE does not support the “fixed” position type, so you have to make a hack for it….

      * html #TOBlock {
     position: absolute;
	/*Must Fix the position of Block Div b/c IE does not make div height 100%*/
     top: expression(eval(document.compatMode &amp;&amp; document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}

      God I hate IE.

    9. Eddie permalink*
      October 15, 2008

      @mataichi

      Thanks!!

      I hope you don’t mind I threw your code through Geishi to make it easier to read.

      @Readers

      Just replace the second block of CSS from the article with mataichi’s code. (but make sure you change the name back to loadingDiv if thats what you use in the html)

      Can anyone second this hack before I update the article please?

    10. Annice permalink
      October 29, 2008

      Well said.

    11. Todd permalink
      November 24, 2008

      Hi just a quick question.

      I’m using your code, its great. BUT…

      I can’t get it to work on my form using the onSubmit function. It works with onclick function, but this defeats the purpose as i want to also validate my form.

      Any pointers would be a great help.

    12. Eddie permalink*
      November 24, 2008

      @Todd, glad this helped.
      I don’t know enough about your setup or experience to really answer..
      I would just walk through some typical troubleshooting steps. First look at the java console or error console of your browser for any JS errors. if not try calling a simple command like alert() from the onsubmit method to isolate the functionality from the calling method….
      HTH

    13. Todd permalink
      November 25, 2008

      Got it to work now. My external javascript file was stopping it working.

      The way I got it to work was with a hidden AP div and got it to show onSubmit.

      And it works!!! I’m really happy!!!

    14. Glen permalink
      March 3, 2009

      Excellent!

      Very useful!

      thanks

    15. Emily permalink
      July 3, 2009

      Thanks for the example.

    16. dimitrios permalink
      May 19, 2010

      i think this is what i was looking for. a few requests though.

      can you upload a zip with ALL the necessary files for a demo view of what it EXACTLY does?

      Can we use a progress bar with percentage instead of simple “*.gif”?

      i want a preloader with percentage until the images of my “index.php” file are loaded. there are a lot of these images in my file, about 7 MB. any suggestions;;

    17. Eddie permalink*
      May 26, 2010

      @dimitrios

      You may be more interested in a PHP library to show an updatable progress bar..

      http://www.drsoft.com/b/Your_very_own_PHP_progress_bar-73

      You could use that in combo with the tricks above to disable the page, and show progress until everything is ready.

      Good luck!

    18. pradnya permalink
      May 10, 2011

      hey… thanks a lot for the post..
      it worked fine when I tried to implement this…
      .. with one problem that the animation of the iamge dint work on my webpage… its diplaying just a plain image..
      Can you help me out in this????
      Regards,
      pradnya

    19. Eddie permalink*
      May 10, 2011

      I would check the image you downloaded our get a new one from the provided link. It’s just an animated gif

    20. Pradnya permalink
      May 11, 2011

      I tried your adjustment ,also mataichi’s adjustment,but still the height is not 100%.Its covering juts some part at the bottom of the browser window.I am trying it in IE 8.

    21. Eddie permalink*
      May 12, 2011

      I would activate the element and use firebug on FF or chrome’s built in tools. Right click the element and “inspect element” and look at the surrounding elements as well. My guess is some css or html from another part of your page isn’t playing nice, and you’ll have to dig in to understand why.

    22. rahul permalink
      June 2, 2011

      I am very new to web world.

      Can you please share the implementation of this code.

    23. Eddie permalink*
      June 3, 2011

      @Rahul
      If you are very new I feel obligated to warn you that pasting code copied from various sites will not help you get anywhere fast. The best way for you to learn is to read documentation, understand examples, and code for yourself. It is the only way to gain an understanding for the underlying technology.

      It is due to this belief that I have a long standing reputation of not uploading pre-packaged solutions, and only include enough code and discussion to focus on the matter at hand.

    24. Pradnya permalink
      July 7, 2011

      Sharing my comments after long time.I was breaking my head on other issues. It is finally working fine on my webpage. I was facing the problem as there are so many nested div elements in my web page.I made a simple change in your code, that I created a new image tag in my html page for back-grond image and mentioned the height and width in css to fit the browser window. It is working completely fine as expected.
      And if someone is facing a problem rgarding the animation of the image please check into your javascript code, as for me my other java script code was causing a problem.
      And ofcourse you will have to make some extra efforts to make it work on IE.
      Thanks for all the help Eddie. Being a newbee in web development your tutorial helped me lot.

    25. Mohammad permalink
      July 20, 2011

      ldiv is null
      [Break On This Error] ldiv.style.display = ‘none’;

      not working for me…
      not able to find error. where i am making mistake
      i was looking for this only, but….

    26. Eddie permalink*
      July 21, 2011

      What is the IDof your div that contains the progress image? Did you declare that properly in your ldiv object using getElementById ?

    27. deep permalink
      October 4, 2011

      hi,
      can u can tell me how can i put this js in cakephp framework?

    Leave a Reply

    Note: You can use basic XHTML in your comments. Your email address will never be published.

    Subscribe to this comment feed via RSS