PDA
Partners

View Full Version : Tutorial : News Scroller


Fabolous05
June 28th, 2004, 05:04 AM
Hi you can use this scroller for things like the news or for any reasons you can think of. If you edit the code you can adjust the size, background, and font of the scroller. It's only limited by your imagination :)

This is a simple javascript and requires no external .js files like other tutorials of mine

just insert this code where you want the scroller to appear,


<script language="JavaScript1.2">

var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#0099CC'
var pause=3000 //milliseconds (3000=3 seconds)

var scrollercontent=new Array()
//What you want to scroll
scrollercontent[0]='Visit the forums <a href="http://www.webmasterlingo.com">WebmasterLingo.com </a>for free web help!'
scrollercontent[1]='Email Fabolous05 to get a new design, <a href="mailto:fabolous05@gmail.com">E-Mail</a>.'
scrollercontent[2]='Google is the top search engine. Go give Google a try, <a href="http://www.google.com">Google</a>.'



////Hey don't proceed past here!
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)
}
}

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>
</script>







This is where you get to specify what it scrolls,

scrollercontent[0]='Visit the forums <a href="http://www.webmasterlingo.com">WebmasterLingo.com </a>for free web help!'
scrollercontent[1]='Email Fabolous05 to get a new design, <a href="mailto:fabolous05@gmail.com">E-Mail</a>.'
scrollercontent[2]='Google is the top search engine. Go give Google a try, <a href="http://www.google.com">Google</a>.'


You can adjust some settings here as well

var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#0099CC'
var pause=3000 //milliseconds (3000=3 seconds)



here is the script in action,
http://members.shaw.ca/designs604/calendar/scroller/


Fabolous05
good luck!

kitty
September 1st, 2005, 04:18 AM
in www.hotscripts.com (http://www.hotscripts.com) u will find different codes u can use it