WebmasterLingo
JustEdge Dedicated Servers

Go Back   WebmasterLingo > Programming Corner
User Name
Password

Reply
 
Thread Tools Search this Thread Rate Thread Display Modes
Old June 28th, 2004, 04:04 AM   #1
Fabolous05
Registered User
 
Join Date: Jun 2004
Location: Surrey, BC
Posts: 184
Fabolous05 is off the scale
Tutorial : News Scroller

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,

Code:
<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=documen t.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,
Code:
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
Code:
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!
__________________
Fabo@VolantaStudios.com
Head Designer
Volantà Studios
Fabolous05 is offline   Reply With Quote
Old September 1st, 2005, 03:18 AM   #2
kitty
Registered User
 
Join Date: Aug 2005
Posts: 16
kitty is on a distinguished road
in www.hotscripts.com u will find different codes u can use it
__________________
NewEra
web develop
kitty is offline   Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT -5. The time now is 04:13 PM.

Windows 2003, cPanel & DirectAdmin Unix Web Hosting