Fading Text ~ Program your own fading in and out messages. Tested in IE6.0, Netscape7.02, Netscape8.0.4, Opera8.51, Firefox1.0.7 and AOL Explorer1.1

T his script will fade in and out different messages that you program into the script.

W e have tested the code in IE6.0, Firefox1.0.7, Opera8.51, Netscape7.02, Netscape8.0.4 and AOL Explorer1.1. This script worked in IE6.0, Opera8.51 and AOL Explorer1.1. All other platforms tested you will not see the effect and there will be a blank space where the effect would be seen. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and Java scripts it is not that hard. It is only a two part copy and paste code that the first part gets pasted into the <HEAD> section of your document and the last part gets pasted into the <BODY> tag. If you do not know how to add the onload event handler into your <BODY> tag, see the below example:

N ow the fun starts. You can leave the code exactly the way it is and it will work great or if you like to experiment you can reconfigure many aspects of this code. You can alter the colors that fade, you can change font size, type of font, make one set of words a link, have the text vanish and not appear again place the text in different locations etc. All these variables can be reconfigured to suit your page.

Note of Importance ~ The default color on the background on this script is "Black" or in hex #000000. Any reconfigurations you want to do as to altering the color(s) Must be done in Hex Code. If you need a Hex code chart, there is a link below for it. This is a very highly configurative script, so below you will see the different configurations.
[ Color Chart With Hex Codes ]

I f you would like a really (we feel) excellent small (485 kb) "Freeware" color chart that gives you Word, HEX and RGB color codes. "Visual Color Picker is a simple color selection program with instant RGB-HSV conversion. It contains predefined and custom color tables, HTML code converter as well as a text/background color preview. The program also allows you to save selected colors to a custom color collection......". This program was designed for Windows 98/ME/NT/2000/XP. Grab the below link to read more about it and install it if you want.
[ Visual Color Picker ]

Reconfigurations In Head Section

The first section of script is to adjust the positioning of the fading text.

<div id="fader" style="position:absolute; top:35px; left:80px; width:600px; text-align:center;"></div>

This part of the Head Section is to configure text, links, font, etc.

var texts = new Array(
"Text Here",

"Text Here",

"Text Here",

"Text Here",

"<a href='Link URL Here' target='_top'>Link Text</a>");

var bgcolor = "#000000"; // background color, must be valid browser hex color (not color names)
var fcolor = "#FF8000"; // foreground or font color
var steps = 20; // number of steps to fade
var show = 500; // milliseconds to display message
var sleep = 30; // milliseconds to pause inbetween messages
var loop = true; // true = continue to display messages, false = stop at last message

// Do Not Edit Below This Line

There Are No Reconfigurations In The Body Section

All you need to do is:



If you have more than one onLoad event on your page, you may find that one or more of these effects will not work. If you would follow the below link, it will show you how to add more than one "onLoad" event to your page and have them all work in conjunction with one another.
[ Add More Than One Script ]

Explanation Of Different Tags Used

target='_top' This tag is used in reference to where a link will open. This will make a link open in the same browser window or in a frameset it is used to open the link in the "Top" frame.
target='_blank' You can substitute this tag and the link will open in a new browser window as opposed to the same window.

face='Arial' This is used in reference to the font style you want to use.
Your Strong Text Here This tag is used to have certain text stand out more than the rest. You can remove this tag if you don't want it.
</a> This is the closing tag when you have a link associated with the text.

Final Note

T his fading text effect is what is referred to as a "Static" effect. What this means is that it is always on top of everything else. This is why the positioning is very important as not to have it cover anything you want to be seen.

I you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.