Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

javascript to change background color

Posted on 2011-09-23
11
Medium Priority
?
245 Views
Last Modified: 2012-05-12
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?
0
Comment
Question by:rgranlund
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 9

Expert Comment

by:user_n
ID: 36588151
0
 
LVL 7

Author Comment

by:rgranlund
ID: 36588215
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
 
LVL 9

Expert Comment

by:user_n
ID: 36588241
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:user_n
ID: 36588260
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36588275
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
 
LVL 7

Author Comment

by:rgranlund
ID: 36588427
@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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36588598
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
 
LVL 3

Accepted Solution

by:
timhigham earned 1000 total points
ID: 36592487
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
 
LVL 3

Expert Comment

by:timhigham
ID: 36592492
PS ignore
<script type="text/javascript" src="jscripts/callStats.js"></script>
its irrelevant - thanks to COPY / PASTE
0
 
LVL 7

Author Comment

by:rgranlund
ID: 36599873
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question