JavaScript Made Easy: Free JavaScripts Tutorials Example Code

WebSiteMadeEasy.net

|

FontsMadeEasy.com

|

RankChecker.net

Submit your Script

Google Search:

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



DHTML Script - NewsSlideFade		[View Sample]

This script fades and slides in and out news. The code is totally remade and works in all 4.x+ browsers and degrades for older browsers. You can in theory have more objects going at once as well, but this makes Netscape 4 behave strange. This script replaces both the old newslide and newsfade. There are 3 different ways this script can work:


Insert into <HEAD>
<style type="text/css"> #divNewsCont{position:absolute; width:300; height:200; left:300; top:280; visibility:hidden} #divNews{position:absolute} </style> <script type="text/javascript" language="JavaScript"> /****************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. *****************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 \|\| this.ie4 \|\| this.ns4 \|\| this.ns5) return this } bw=new checkBrowser() /NOTE************************************************************************ This code is maybe the biggest example of a workaround code as it has different code for all browsers. But it works like a charm :) 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=2 //If you use the slide set these variables: nSlidespeed=5 //in px nNewsheight=50 //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 www.bratta.com/dhtml is updated with more scripts then ever!" nNews[0]["link"]="http://www.bratta.com/dhtml" 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"]="http://www.bratta.com" 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 } function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} function b_newsWrite(num,i){ if(bw.ns4){ this.writeref.write("<a href=\""+this.news[num]['link']+"\" style=\"text-decoration:none; font-size:"+this.size+"px\">" +"<font face=\""+this.font+"\" color=\""+this.color[i]+"\">"+this.news[num]['text']+"</font></a>") this.writeref.close() }else if(bw.dom){ atag=document.createElement("A"); atag.href=this.news[num]["link"] atag.id=this.obj+"link"; atag.style.color=this.color[i] this.writeref.replaceChild(atag,this.writeref.childNodes[0]) this.writeref.childNodes[0].appendChild(document.createTextNode("")) this.writeref.childNodes[0].replaceChild(document.createTextNode(this.news[num]["text"]),this.writeref.childNodes[0].childNodes[0]) }else if(bw.ie4) this.writeref.innerHTML="<a id=\""+this.obj+"link" +"\" style=\"text-decoration:none; color:"+this.color[i]+"\" href=\""+this.news[num]['link']+"\">"+this.news[num]['text']+"</a>" } //Slide in function b_slideIn(num,i){ if(this.y>0){ if(i==0){this.moveIt(0,this.newsheight); this.newsWrite(num,this.color.length-1)} this.moveIt(this.x,this.y-this.slideSpeed); i++ setTimeout(this.obj+".slideIn("+num+","+i+")",50) }else setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.delay) } //The fade functions function b_fadeIn(num,i){ if(i<this.color.length){ 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+".fadeIn("+num+","+i+")",this.speed) }else setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.delay) } 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>

Insert into <BODY>
<div id="divNewsCont"> <div id="divNews"> Default text, this is the text that 3.x browsers will see You can have lot's of ˜ here in stead. Or you can use a script to write in text only if it's Netscape 4 (you have to do that so that the layer gets some content or the written in text won't show correct. </div> </div> YOUR REGULAR BODY CONTENT GOES IN HERE

Other Options