Top-Right Corner Javascript Loader
   
This loading screen is an alternate 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 this loading div (URL:
loading-screen-top-right-corner.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 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 the div at the very top-right corner*/
    position:absolute;
    top:0;
    right:0;

    /*add some color and styling*/
    background:#006;
    color:#fff;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    height:1em;
  }

  /*make sure the paragraph inside the div
    isn't too tall*/
  div.loading-visible p{
    margin:0;
    padding:0;
    padding-right:25px;
  }
</style>


   
This CSS positions the loading div at the very top-right of the screen.
   
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.

position:absolute;
top:0;
right:0;

   
This part of the CSS positions the loading div at the top-right corner of the
screen. By setting right:0, the div will be zero pixels from the right side of
the screen.

height:1em;

   
This line sets the height of the div to 1em, which equals one line of text. This
can be changed if you want to have more than one line of text in the div.

div.loading-visible p{
  margin:0;
  padding:0;
  padding-right:25px;
}

   
This part of the CSS makes the paragraph tag inside the div only as high as one
line of text. It also adds some space to the right of the text.
   
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.