JavaScript for Translucent Scroller

**hatred** · 07-02-2010

Hiii Friends,
I want to make some effects on my web page. Actually I am looking for the "translucent" scroller. I want to write it in JavaScript. The scroller should turn semi-transparent, when I change the message as the next message slides up to cover the old. I think that you guys have got my point. So can anyone help me by providing the sample of JavaScript for Translucent Scroller. Thanks in Advance.!!!

**MindSpace** · 07-02-2010

I got what exactly you want. You want your scroller should turn semi-transparent, when you change the message. You can do this effect by using the Flash. But now you can write the script for the same.!! The main thing you will have to keep in mind that your browser like Internet Explorer, Mozilla Firefox, etc. should be updated to the latest version. Otherwise the script will not work. Hope that you got some basic and important points from this post..!!

**Allan.d** · 07-02-2010

In simple words you can say that, Translucent Scroller is a multi-platform compatible translucent scroller turns semi transparent in between message changes. Also you can download the javascript from the web for free. Afte downloading the script, you will able to see the effects in your web page. Also once you download the specific files, you can easily configure the width/height, color, and contents of the scroller by changing the variables inside the script. Hope that it helps.

**kelfro** · 07-02-2010

I thought that providing the sample of the code would be much useful for you. So, I have given you the sample of the coding that you have to add where you wish the scroller to appear in the <body> section. Here is the code for that :

Code:

<script language="JavaScript1.2">

var scroller_width='175px'
var scroller_height='130px'
var bgcolor='#0000ff'
var pause=4000

var scrollercontent=new Array()
scrollercontent[0]='Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!'
scrollercontent[1]='Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.'
scrollercontent[2]='Link to Demos on your site. Please visit our <a href="http://www.demos.com/link.htm">links page</a>.'

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}
</script>

**Zecho** · 07-02-2010

The code mentioned by the 'kelfro', is not properly completed. You will have to add the function rotateslide(), for making the effect of the scroller to be translucent. You can continue the below mentioned code after using the code mentioned by 'kelfro'. You can have a look on the following code :

Code:

<script language="JavaScript1.2">

var scroller_width='175px'
var scroller_height='130px'
var bgcolor='#0000ff'
var pause=4000

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>