javascript to change background color

Is there a way to temporarily set a html background color to #000000 until the window has fully loaded and then change it to transparent?
LVL 7
rgranlundAsked:
Who is Participating?
 
timhighamCommented:
transparent background ?????
Is this the body element you are trying to set or a high z-level mask on top of the whole page?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="jscripts/callStats.js"></script>
<style type="text/css">
      .loadBackground{
            background-color:#000000;
            
      }
      .normalBackground{
            background-color:#0000ff;
      }
</style>
<title></title>
</head>
<body id="body" class="loadBackground">

<script type="text/javascript">
// final part of page so the rest has loaded
      alert("test pause");
      document.body.className="normalBackground";
</script>
<!-- NOTHING BELOW HERE EXCEPT CLOSE OF BODY -->
</body>
</html>
0
 
rgranlundAuthor Commented:
User N.  That is an interesting example but it does not answer my question.  I want to set a page color until the page completely loads that I want the background color to automatically change.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
user_nCommented:
onLoad and onUnload

The onLoad and onUnload events are triggered when the user enters or leaves the page.

The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".
0
 
Tom BeckCommented:
I think the .ready() function in jQuery would be the most efficient way to do what you want. Something like this:
...
<style type="text/css">
.body_0 {background-color:#def}
.body_1 {background-color:#000}
  </style>  
      <script src="scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(document).ready(function () {
                  $("body").removeClass('body_1').addClass('body_0');
            });
      </script>
</head>
<body class="body_1">
...

Trying to do it with just javascript looks pretty involved from what I read.

http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery
0
 
rgranlundAuthor Commented:
@TommyBoy and et all:

I need to change it here:

<!DOCTYPE html>
<html style="background-color: #000000;">

So I need to use javascript here to change the color from black to transparent after page fully loads.
0
 
Tom BeckCommented:
I would suggest a similar solution:

<!DOCTYPE html>
<html class="html_1">
<head>
 <title>Untitled</title>
 <style type="text/css">
.html_0 {background-color:transparent}
.html_1 {background-color:#000}
 </style>
<script src="scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function () {
             $("html").removeClass('html_1').addClass('html_0');
        });
      </script>

</head>
<body>
</body>
</html>
0
 
timhighamCommented:
PS ignore
<script type="text/javascript" src="jscripts/callStats.js"></script>
its irrelevant - thanks to COPY / PASTE
0
 
rgranlundAuthor Commented:
I have used this to rectify the issue with Google Chrome flashing white when you load a new screen.  It does not validate however, it works like a charm.  Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.