DHTMLCentral.com - Free Dynamic HTML Scripts

Login

Save Password - Forgot Pass?

Not a member?
Become a DC
member now!

Info

Author: Thomas Brattli

Works in: NS4+ IE4+

Downloaded:50238 times
View script

History
No history...

NewsSlideFade
Written 05/23/2001 by Thomas Brattli. Last updated 09/04/2001.

This is a newsticker script that slides text in and fades it out, or fades it in and out.

Instructions
Instructions in source-code.

Source
You have two options on getting the source to this script.

1. Copy the source from the textboxes below and place the code inside the body textbox in the body of your document and the code in the head textbox in the head of your document. If there are images to the script right click on the images below the textboxes and choose "save as" to get them.

2. Download the sourcecode and images in a zip file

Head

/***************************************************************************
Use the style tag to change the placement and width of the layers.
If you are trying to place this into a table cell or something make the
position of the divNewsCont layer relative...Remeber that that might crash
Netscape 4 though, Good luck!
********************************************************************************/

/****
Variables to set 
****/

//How do you want the script to work? 
//0 = Fade in - Fade out
//1 = Slide in - Fade out
//2 = Random 
nWorks = 1

//If you use the slide set these variables:
nSlidespeed = 5 //in px
nNewsheight = 80 //This is how long down it should start the slide.

nBetweendelay = 1000 //The delay before fading out.
nFont = 'arial,helvetiva' //The font for the news.
nFontsize = 12 //Font size in pixel.
nFadespeed = 100 //The speed to fade in, in milliseconds.

//Set the colors, first color is same as background, last color is the color it stops at:
//You can have as many colors you want
nColor=new Array('#FFFFFF', '#EEEEEE','#CCCCCC','#999999','#666666','#333333','#000000')

//This is the news you wanna have, set the link and the text. If you don't wan't it to link anywhere
//use a # as the link
nNews=new Array()
//Copy there three lines and change the info and numbers to get more news.
nNews[0]=new Array()
nNews[0]["text"]="New scripts  is updated with more scripts then ever!"
nNews[0]["link"]="/"

nNews[1]=new Array()
nNews[1]["text"]="Dynamic HTML scripts can be found here! ZoomText, FadeNews, TextChange and lot's lot's more.."
nNews[1]["link"]="/"

nNews[2]=new Array()
nNews[2]["text"]="Search the web with yahoo!"
nNews[2]["link"]="http://www.yahoo.com"

/********************************************************************************
Object code...Object constructors and functions...
********************************************************************************/
function makeNewsObj(obj,nest,font,size,color,news,fadespeed,betweendelay,slidespeed,works,newsheight){
    nest=(!nest) ? "":'document.'+nest+'.'
   	this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;	
   	this.writeref=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
	if(font){this.color=new Array(); this.color=eval(color); this.news=new Array(); this.news=eval(news)
		this.font=font; this.size=size; this.speed=fadespeed; this.delay=betweendelay; this.newsheight=newsheight;
		this.fadeIn=b_fadeIn;this.fadeOut=b_fadeOut; this.newsWrite=b_newsWrite; this.y=1
		this.slideIn=b_slideIn; this.moveIt=b_moveIt; this.slideSpeed=slidespeed; this.works=works
		if(bw.dom || bw.ie4){this.css.fontFamily=this.font; this.css.fontSize=this.size; this.css.color=this.color[0]}
	}
	this.obj = obj + "Object"; 	eval(this.obj + "=this"); return this
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}

function b_fadeOut(num,i){
	if (i>=0){
		if (i==0 || bw.ns4) this.newsWrite(num,i)	
		else{
			obj = bw.ie4?eval(this.obj+"link"):document.getElementById(this.obj+"link")
			obj.style.color = this.color[i]
		}
		i --
		setTimeout(this.obj+".fadeOut("+num+","+i+")",this.speed)
	}else{
		num ++
		if(num==this.news.length) num=0
		works = !this.works?0:this.works==1?1:Math.round(Math.random())
		if(works==0) setTimeout(this.obj+".fadeIn("+num+",0)",500)
		else if (works==1){this.y=1; setTimeout(this.obj+".slideIn("+num+",0)",500)
		}
	}
}
/********************************************************************************************
The init function. Calls the object constructor and set some properties and starts the fade
*********************************************************************************************/
function fadeInit(){
	oNews = new makeNewsObj('divNews','divNewsCont',nFont,nFontsize,"nColor","nNews",nFadespeed,nBetweendelay,nSlidespeed,nWorks,nNewsheight)
	oNewsCont = new makeNewsObj('divNewsCont')
	works = !oNews.works?0:oNews.works==1?1:Math.round(Math.random())
	if (works==0) oNews.fadeIn(0,0)
	else if (works==1) oNews.slideIn(0,0)
	oNewsCont.css.visibility = "visible"
}

//Calls the init function on pageload. 
if(bw.bw) onload = fadeInit
</script>

Body

All the free scripts on this site may be reused as long the copyright notice is intact in the script source. If you wish to use any of the scripts without the copyright notice contact us at copyright@dhtmlcentral.com.

Donations

Though all scripts on this site is free you have the ability to donate to the site to help freeing up my time to make the scripts (and the rest of the site) better.

For more info see donations.

NewsSlideFade Written 05/23/2001 by Thomas Brattli. Last updated 09/04/2001.

Donations

NewsSlideFade
Written 05/23/2001 by Thomas Brattli. Last updated 09/04/2001.