An excellent snippet from Dynamic Drive which works really well with TP as a side block
Demo: http://goofy-goobers.com/forum (look on the right)
code to add to a SCRIPT block:
<script language="JavaScript1.2">
//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#0A1C31'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='<center>Your content goes here 1</center>'
scrollercontent[1]='<center>Your content goes here 2</center>'
scrollercontent[2]='<center>Your content goes here 3</center>'
////NO need to edit beyond 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>
where it says
scrollercontent[0]='Your content goes here 1' u can put any sort of html between the ' and ' and it will show up in the slideshow.
If u need to add more content just copy the line and increase the number in the square brackets
This part obiviously sets the height width color and delay of the slide show:
var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#0A1C31'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
Please note the color u select - make it either a LITTLE darker or lighter than the actual color of ur block or for some reason it becomes way too translucent
thats all
credits: dynamicdrive.com
aku
Looks cool, but in IE7, it's not centered ;)
Quote from: RoarinRow on January 01, 2007, 09:12:23 PM
Looks cool, but in IE7, it's not centered ;)
Im having the same problem.
code changed above to fix IE
Its fixed now thanx! Aku.
One question tho'.... is this only for html?? no images? [img /img]????
no BB codes html is very simple really
for images u have a tag:
<img src="image address here" width=123" height ="123">
for links
<a href="address here">Link text here</a>
hope that helps
Quote from: Aku on January 01, 2007, 10:12:45 PM
no BB codes html is very simple really
for images u have a tag:
<img src="image address here" width=123" height ="123">
for links
<a href="address here">Link text here</a>
hope that helps
Yep. It really helped but the images are a bit blurry. Maybe if i make a center block and change the size will cure it. Any ideas?
See it in action center very top. www.midwestavalancheclub.com
remove that this part: width=123" height ="123" from the image tag i gave u above, it can be removed, that way ur images will show undistorted in their actual dimensions
if images may be too big then u may want to move the block to another part.
Thanks for this code ;)
Thnx for the code Aku!!! It works pretty good now. I made it on a center block and changed the width and height also.
Now i need to upload more pics :up:
Quote from: bluedevil on January 01, 2007, 10:54:07 PM
Thnx for the code Aku!!! It works pretty good now. I made it on a center block and changed the width and height also.
Now i need to upload more pics :up:
Looking good Mick! :up:
Quote from: RoarinRow on January 01, 2007, 11:51:00 PM
Quote from: bluedevil on January 01, 2007, 10:54:07 PM
Thnx for the code Aku!!! It works pretty good now. I made it on a center block and changed the width and height also.
Now i need to upload more pics :up:
Looking good Mick! :up:
thnx Ro!
yea its looking very nice :up: