« »

Nicholas's cool Dynamic Fader script gently brings into view various messages, then fades them out after a few seconds. Supports the display of HTML content (such as links), apart from plain text.

Label: Dynamic Fader Script

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style TYPE="text/css">
	<!--
	.TextScrollStyle {
		visibility:hidden;
		font-family:Verdana;
		font-weight:bold;
		text-align:center;
		padding:0;
		margin:0;
		width:100%;
		overflow:hidden;
	}

	-->
	</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="JavaScript1.2">

/*
Dynamic Fader Script (updated: 00/08/05)
Created and submitted by Nicholas Poh (hwinmain@yahoo.com) to Dynamicdrive.com
Key modifications by Dynamic Drive for stability/ efficiency in NS
For full source code, usage terms, and 100s more scripts, visit http://dynamicdrive.com
*/

//1) Configure messages:
		var TS_message = new Array();
             TS_message[0] = '<div align="left">Hello there</div>';
	       TS_message[1] = '<div align="left">Wow... hope you like it!</div>';
		TS_message[2] = '<div align="left">Presented by <A HREF="http://JavaScriptBank.com">JavaScriptBank.com</A></div>';

//2) Configure fader width and colors:
             var TS_scrollwidth=400      //configure fader width
		var TS_colorFG = 0x000000;	// Text color
		var TS_colorBG = 0xFFFFFF;  //bgColor

             // uncomment any value you wanted to change
		//var TS_ymax    = 50;			// How many pixel to move
		//var TS_ystep   = 1;			// 1 or -1 only (Scroll direction)
		//var TS_speed   = 2;			// The smaller the value the faster
		//var TS_pause   = 100;			// Pause time(milisecond) between messages
		var TS_fadestep= 20;			// Steps to fade in and out

             if (document.all)
             document.write('<style>#containerarea{width:'+TS_scrollwidth+'}</style>')
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id="containerarea">
<SCRIPT LANGUAGE="JavaScript1.2" name="textfader.js">
// Dynamic Text Fader (1.20)
// (Updated on 6/7/2000)
// Script created by Nicholas Poh Tze Siang aka Programatix Copyright (c) 1999-2000
// (hwinmain@yahoo.com)
//Modified and Featured on http://www.dynamicdrive.com


// Create a hex convertor array (Dex2Hex[])
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var value=0;
var Dec2Hex=new Array();
for (x=0; x<16; x++){
	for (y=0; y<16; y++){
		Dec2Hex[value]= hexbase[x] + hexbase[y];
		value++;
	}
}

// Convert RGB colour to string base
function RGB2STR(rgbcolor)
{
	return Dec2Hex[rgbcolor>>16] + Dec2Hex[(rgbcolor>>8)&0xFF] + Dec2Hex[rgbcolor&0xFF];
}

// Check the following variables to see if they exist. If not use default value
if (String(TS_colorFG)=="undefined") var TS_colorFG = 0x0000FF;	// Text color
if (String(TS_colorBG)=="undefined") var TS_colorBG = 0xFFFFFF;	// Background color
if (String(TS_ymax)   =="undefined") var TS_ymax    = 50;		// How many pixel to move
if (String(TS_ystep)  =="undefined") var TS_ystep   = 1;		// 1 or -1 only (Scroll direction)
if (String(TS_speed)  =="undefined") var TS_speed   = 2;		// The smaller the faster
if (String(TS_pause)  =="undefined") var TS_pause   = 600;		// Pause time(milisecond) between messages
if (String(TS_fadestep)=="undefined") {
	var TS_fadestep = TS_ymax>>1;
} else {
	if (TS_fadestep > (TS_ymax>>1)) TS_fadestep = TS_ymax>>1;
}

// check if user defined messages exist
if (String(TS_message)=="undefined") {
	// use the default messages
	var TS_message = new Array();
	TS_message[0] = 'Dynamic Text Fader 1.20';
	TS_message[1] = 'Code by Nicholas Poh Tze Siang aka Programatix';
	TS_message[2] = 'You can insert any HTML tag into the messages';
	TS_message[3] = 'Code downloaded from <A HREF="http://dynamicdrive.com">dynamicdrive.com</A>';
}

var TS_ypos    = 0;
var TS_yposOrg = 0;
var TS_color   = TS_colorBG;
var TS_curMsg  = 0;

// Calculate the difference between background and foreground color
var half_TS_ymax = (TS_ymax)>>1
var dfRed   = -((TS_colorBG>>16) - (TS_colorFG>>16)) / TS_fadestep;
var dfGreen = -(((TS_colorBG>>8)&0xFF) - ((TS_colorFG>>8)&0xFF)) / TS_fadestep;
var dfBlue  = -((TS_colorBG&0xFF) - (TS_colorFG&0xFF)) / TS_fadestep;
var TS_opColor  = (dfRed<<16) + (dfGreen<<8) + (dfBlue);

var timer;
var TS;

function UnloadMe()
{
	clearTimeout(timer);
}

var isReadForNextText = 0;
var isChangeText = 0;

function ScrollText(currentstate)
{


	TS_ypos += TS_ystep;
	
	// Ready to change text?
	if (TS_ypos >= TS_ymax || TS_ypos <= 0)
		isChangeText = 1;
	else
		isChangeText = 0;

	// Need to set the timer first so that it will go smoothly
	if (isChangeText) {
		if (TS_pause < TS_speed)
			timer = setTimeout('ScrollText(0)', TS_speed);
		else
			timer = setTimeout('ScrollText(1)', TS_pause);
	} else
		timer = setTimeout('ScrollText(0)', TS_speed);

	// Change text
	if (isReadForNextText) {
		// For IE only
		TextScroll.innerHTML = TS_message[TS_curMsg];
		isReadForNextText = 0;
	}

	// Change the color of the text
	if (document.all) {
		// IE
		TS.paddingTop = TS_ypos;
		TS.color = TS_color;
	} else if (document.layers) {
		// Netscape
		TS.top = TS_ypos + TS_yposOrg;
		
		// Clip the text
		var calc = (TS.top-TS_yposOrg) + TS.document.height - 20
		if (calc > TS_ymax) {
			TS.clip.bottom=(TS.document.height) - (calc-TS_ymax);
		} else {
			TS.clip.bottom=TS.document.height;
		}

		// Display the text
		text  = '<SPAN CLASS="TextScrollStyle">' +
				'<FONT COLOR='+TS_colorFG+'>' +
				TS_message[TS_curMsg] +
				'</FONT></SPAN>';
		TS.backgroundColor = TS_colorBG;
		TS.backgroundColor = 'black';
             if (currentstate==1){
		TS.document.write(text);
		TS.document.close();
             }
	}
	if (TS_ypos < TS_fadestep || (TS_ymax - TS_ypos) < TS_fadestep) {
		TS_color += TS_opColor;
	}

	// Check to see if in the middle, if so, change colour direction
	if (TS_ypos == half_TS_ymax) TS_opColor *= -1;	
	
	// Prepare for next text please
	if (isChangeText) {
		TS_color = TS_colorBG;
		TS_opColor *= -1;

		if (TS_ystep > 0) {
			TS_ypos = 0;
		} else {
			TS_ypos = TS_ymax;
		}

		if (++TS_curMsg > TS_message.length-1) {
			TS_curMsg = 0;
		}

		// Change text
		if (document.all) {
			// IE
			TextScroll.innerHTML = " ";
			TS.paddingTop = TS_ypos;
			isReadForNextText = 1;
		} else if (document.layers) {
			TS.document.write('');
			TS.document.close();
			TS.top = TS_ypos + TS_yposOrg;
		}
	}
}

function startani(){
      if (document.layers)
      document.TextScroll.visibility="show"
      timer = setTimeout('ScrollText()', 1000)
}


function ScrollTextDisplay()
{
	var navName=navigator.appName;
	var navVer=parseInt(navigator.appVersion)
	var fNetscape = 0;
	
	if (! ((navName=="Netscape" && navVer>=4) || (navName=="Microsoft Internet Explorer" && navVer>=4)) ) {
		return;
	}
	if (navName=="Microsoft Internet Explorer") {
		TS_speed = 20 + TS_speed;
	} else if (navName=="Netscape") {
		fNetscape=1;
	}
	
	document.write('<ILAYER NAME="TextScroll" CLASS="TextScrollStyle" WIDTH="'+TS_scrollwidth+'" HEIGHT=' + (TS_ymax+20) + ' BGCOLOR=' + RGB2STR(TS_colorBG) + ' VISIBILITY="hide">');
	document.write('<LAYER NAME="Content" WIDTH="'+TS_scrollwidth+'">');
	document.write('<SPAN ID="TextScroll" CLASS="TextScrollStyle">');
	if (fNetscape) document.write('<FONT COLOR='+TS_colorFG+'>');
	document.write(TS_message[0]);
	if (fNetscape) document.write('</FONT>');
	document.write('</SPAN>');
	document.write('</LAYER>');
	document.write('</ILAYER>');
	
	if (TS_ystep > 0) {
		TS_ypos = 0;
	} else {
		TS_ypos = TS_ymax;
	}

	if (document.all) {
		// IE
		TS = TextScroll.style;
	} else if (document.layers) {
		// Netscape
		TS = document.TextScroll.document.Content;
		TS_yposOrg = TS.top;
	}
	TS.height = TS_ymax+20;
	TS.color = TS_color;
	TS.visibility = "visible";
	TS.backgroundColor = TS_colorBG;
	
	window.onload=startani
	window.onunload=UnloadMe;
}

ScrollTextDisplay()
</SCRIPT>
</DIV>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->