Full Screen Javascript Load Page
   
This loading screen is a full-screen version of my original JavaScript loading
screen (URL: javascript-css-loading-screen.html). The only difference between
this loading screen and the original is the CSS.
   
Click here to preview the full-screen loader (URL:
loading-screen-full-screen.html)
   
Step One
   
First, grab the XHTML and JavaScript from my original page loader (URL:
javascript-css-loading-screen.html#html). Then, just use the below CSS. Once
again: use the HTML and JavaScript found here (URL:
javascript-css-loading-screen.html#html), and then use the below CSS.
   
The CSS
   
Put this code inside the head tag:

<style type="text/css">
  /*this must be set so that the loading div
    can be height:100% */
  body{height:100%}

  /*this is what we want the div to look like
    when it is not showing*/
  div.loading-invisible{
    /*make invisible*/
    display:none;
  }

  /*this is what we want the div to look like
    when it IS showing*/
  div.loading-visible{
    /*make visible*/
    display:block;

    /*position it at the very top-left corner*/
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;

    /*in supporting browsers, make it
      a little transparent*/
    background:#fff;
    _background:none; /*this line removes the background in IE*/
    opacity:.75;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;

    /*set the padding, so that the content
      of the div is centered vertically*/
    padding-top:25%;
  }
</style>


   
This CSS makes the loading div fill the entire screen, and it centers the
content of the div.
   
Now, just grab the XHTML and JavaScript here (URL:
javascript-css-loading-screen.html#html), and you'll be finished!
   
CSS Walkthrough
   
Now let's do a breif walkthrough of this simple CSS.

body{height:100%}

   
The height of body must be set to 100%. If it is not, setting the heigh of our
div to 100% will not work.

position:absolute;
top:0;
left:0;
width:100%;
height:100%; 


   
This positions our div at the very top-left of the page, and sets the height and
width to 100%. This makes the div fill the screen.

opacity:.75;

   
This makes the div a little bit transparent. However, this does not work in
Internet Explorer, so we must use the following fix:

background:#fff;
_background:none;

   
The first line sets the background to white. But since opacity doesn't work in
IE, this means that the white div will cover the whole page and everything will
be hidden. The second line is only read by IE, and it removes the background.
   
More Questions?
   
As always, if you have any more questions, please email me (URL: contact.html).
I am always glad to answer questions and work on custom scripts.