Web Hosting by Netfirms | Free Domain Names by Netfirms

Changing background color

One of the best ways to get the immediate attention of a user is to have the web page flash. Changing the background color of the document can do this. You change the background color by setting the bgColor property of the document to a different color that is not the current color.

The following example is going to create a (imaginable) news flash about Microsoft being the king. To try and get the user to look at and read this information we are going to change the background color of the document from black to white repetitively. Run Code | View Code

Process

Alternating the color from white to black
The setTimeout method is used to get this function to call itself in it's self.
Function: alternateColor

Events

The loading of the document - onLoad event of the document

Input

count - The maximum number of times the alternateColor is run
color1 - Set to black
color2 - Set to white
colorChangeDelay - The delay that is used before the next call to the alternateColor function
timerId - Used to clear computer memory when the function is called the maximum number of times according to count
maxAlternations - set to 20, determines how many times the function is called.
The message displayed in the middle of the screen - "Microsoft is the king"

Event trigger

The onLoad event of the document will call alternateColor function. The function will then recursively call itself after the delay (colorChangeDelay ) by using setTimeout

The Solution

Function analyses

The alternateColor function's purpose is to change the color of the document from one color to an another.

The function is called as soon as the body loads by the onload event of the document. Once the flow of control is given to the function it then looks after itself. The function is recursive it changes the color of the document to the color it is not already then it increments the count variable by 1 then it calls itself by using the setTimeout function. The setTimeout method returns timerId when it sets it.

It continues this process until count is the same value as maxAlternations. If this condition gets met then clearTimeout is used to free the memory of the timerId that is set every time the function calls itself.

After that the function changes the color of the document to the color it is not then after the specified delay it calls itself recursively until it has run the maximum number of wanted times determined by maxAlternations.

Comments with Code

The onload event

Make the onload event of the document call the alternateColor function <body onLoad="alternateColor()" text="red">

The message

Put the message in the middle of the document


		<table height=100% width=100%><tr><td>
		<h1><center>Microsoft  is the king<center></h1>
		</td></tr></table>

Define global variables

Define global variables out side of function so they do not get respectively set

count - Incremented every time the function is called
color1 and color2 - Hold the colors
colorChangeDelay - colorChangeDelay The delay at that is used before the function calls itself
timmerId - timmerId The the timer id is used used to allow the thread to be cancelled and get out of this function.
maxAlternations - The Maximum number of times the function is called


	var count = 0;

	var color1= "black"

	var color2 = "white"

	var colorChangeDelay = 10

	var timmerId
 
	var maxAlternations = 20;

Define alternateColor

function alternateColor(){ Has the number of alternations been reached? if(count == maxAlternations){ Cancel the threaded process and do not call this function anymore clearTimeout(timmerId); }else{ Set the current background color of the document on the status bar window.status = document.bgColor; Is the current background color of the document black? if(document.bgColor == color1 || document.bgColor== "#000000"){ Set the background color to white document.bgColor = color2 The current background color is white }else{ Set the background color to black document.bgColor = color1 } Wait for 10th of a second (colorChangeDelay) then call this function and put the reference returned by setTimeout into timmerId so it can be cleared timmerId = setTimeout("alternateColor()",colorChangeDelay); Increment the count by one since the function has been called count ++; } }

Usefulness

The bgColor property comes in handy when you want to give the user a way to change the background color of the document. It can also be used to get the user's attention, for example a flashing web page for a few seconds is going to wake somebody up.

Note

If the color of the document is set with a real color value such as "black" then it changes the color representation to hexadecimal red green blue triplet before setting the new color on the document, which will be in this case "#000000". Therefore when you test for a color that you have set on the document with a real color value you must know the hexadecimal representation of it to ensure your test works. This process was exercised in this example.

Run Code | View Code