WEB HOSTING
Web Hosting Australia

F.A.Q.

EziSupport

Control Panel

Dedicated Servers

Special

DOMAIN NAMES
Australian Domain Names

TLDs

Int. Domains

Policy Stuff

DIRECTORY
Listing

Add your Site

MISCELLANEOUS
Web Design

Search Engine Optimisation.

Free Site Analysis

Toos & Tutorials

2 Free Carts!

EziMerchant

Secure Certificates

CONTACT US
Contact Details

E-Mail Us

Fading in text using the DOM

Example (IE5 or NS6 required to view)

 

If you're a JavaScript programmer, the chances are, you've heard of something called the DOM. However, just what exactly is it? How does you program use it?
As both IE and NS move toward conforming to the standards in terms of scripting syntax (especially in the area of DHTML), the pressure to learn and master the DOM increases. In fact, by all accounts it now seems, DHTML in NS 6 will be based entirely on the new DOM, with no support for legacy syntax.
Below we set out 1 example just to wet your appetite.

Fading backgrounds may no longer be the rage, but fading text in all likelihood will prove a lot more enduring. Below we will do with scripting what Java and Flash have been doing for ages - fade text gradually into view. Brought to you by the new DOM (Document Object Model) of IE5 and NS6.

General idea

Let's take a quick trip down memory lane. To change the document's background colour, the code to use is:

document.bgColor="#000000" //change color to black

Oh yeah, haven't seen that in a long time. A background fade is created merely by incessantly calling this code to gradually change the colour from one extreme to another.

Moving on, dynamically changing the text's colour was historically never possible. The new DOM of IE5/NS6 changes that:

document.getElementById("test").style.color="#008000" //change color to green

Here a textual element with ID "test" has its colour transformed to green.

Fading text technique

Believe it or not, the time is ripe to tackle the main subject. What we want is a script that continuously changes the text colour, so as to achieve that nifty fade effect. The trickiest part of it in our opinion is in fact figuring out the hexadecimal equivalent of colour values!

<script language="JavaScript1.2">
hex=255 // Initial color value.

function fadetext(){
if(hex>0) { //If color is not black yet
hex-=11; // increase color darkness
document.getElementById("sample").style.color="rgb("+hex+","+hex+","+hex+")";
setTimeout("fadetext()",20);
}
else
hex=255 //reset hex value
}

</script>

<div id="sample" style="width:100%"><h1>Hello World</h1></div>
<button onClick="fadetext()">Run Script</button>

Demo:

Notice how we can use rgb values to denote the colour, which comes in handy with the application at hand. By changing the value from 255 slowly to 0, we have a fade from white to black!

Fading colours other than black

Sometimes you may wish to fade from white to a colour other than black. A popular one is to blue, useful in fading in a text link, for example. Determining the hex equivalent of colours is definitely not a job intended for us humans. I suggest using one of the colour tools in the tools index.

Here is how the first fade works at the top of the page:

<p align="left"><!--webbot bot="HTMLMarkup" startspan --><div id="fader" style="font:32px Arial bold;width:100%;color:rgb(255,255,255)"></div>

<script language="JavaScript1.2">
hexinput=255 // Initial color value.
var inc=-1 //increment variable

function fadingtext(){
if(hexinput>0) {
hexinput-=11; // increase color value
document.getElementById("fader").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
setTimeout("fadingtext()",20);
}
else
hexinput=255 //reset hex value
}

function changetext(){
if (!document.getElementById) return
inc++
if (inc==0)
document.getElementById("fader").innerHTML="Welcome to EziHosting"
else if (inc==1)
document.getElementById("fader").innerHTML="Your Internet technology partner!"
else{
document.getElementById("fader").innerHTML="Enjoy the tutorial"
inc=-1
}
fadingtext()
setTimeout("changetext()",4000)
}

window.onload=changetext

</script>

End of Tutorial

We hope this tutorial was helpful. If you like, you can link to our tutorials from your web site. Just use the following code:

<a href="http://www.ezi-hosting.com/tutorials.htm">Free Scripting Tutorials from EziHosting</a>