Post by <i>pebble</i> on Dec 1, 2011 2:16:54 GMT 1
Hi Everyone at IOD,
I started writing a code because I couldn't find one that did what I wanted and it turned into this. (Which is a lot more than I needed!)
Use it as a photo slide show, a news scroller(replacement for the proboards news fader) or both, on any or all pages, anywhere you want. Just put the code where you want it to appear.
The 'box' can be any size you want, any color, borders, background image, insert any html into it.
Optional pause length.
No use of 'marquee' , only javascript and css
It's been tested in IE9, Chrome, and FF8. If you use other browsers or versions then some input about how it went would be great !
All feedback welcome and appreciated (it's a work in progress)
Just change the variables or css as needed.
previews:
(photo slideshow)
(text scroller)
(looks like the PB newsfader under the banner)
Edit: code updated to latest version
I started writing a code because I couldn't find one that did what I wanted and it turned into this. (Which is a lot more than I needed!)
Use it as a photo slide show, a news scroller(replacement for the proboards news fader) or both, on any or all pages, anywhere you want. Just put the code where you want it to appear.
The 'box' can be any size you want, any color, borders, background image, insert any html into it.
Optional pause length.
No use of 'marquee' , only javascript and css
It's been tested in IE9, Chrome, and FF8. If you use other browsers or versions then some input about how it went would be great !
All feedback welcome and appreciated (it's a work in progress)
Just change the variables or css as needed.
previews:
(photo slideshow)
(text scroller)
(looks like the PB newsfader under the banner)
<style type="text/css">
#scrlbox { background-image:url('http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/slideshowback.png');
border-color: #FF0000;
position:relative;
}
#prld {
display:none;
}
.txtscr {
font-family:verdana;
font-size:15;
color: #FFFFFF;
font-weight: bold;
text-align:center;
}
A.txtscr { text-decoration:none; color:#FFFFFF;}
A.txtscr:visited { color:#FFFFFF;}
A.txtscr:hover { text-decoration:none; color:#FFFFFF;}
</style>
<center>
<script type="text/javascript">
/* Text Scroller / Photo Slideshow (or both) with optional scroll in/out directions, */
/* random order, preload, clickable text/photo's written by <i>pebble</i>. */
/* Feel free to use but please leave this header in tact - Do not repost.*/
var scrlrheight=120; /* height of the box */
var scrlrwidth=150; /* width of box */
var scrollbg= '#FF0000'; /* backgroundcolor of the box set image in css */
var stilltime=3500; /* pause time of the text/image in milliseconds*/
var brdr=10; /* Border size around box */
var brdrstyl='ridge'; /* border style */
var step=1; /* smoothness of effect : 1=smooth but slow */
var fxspd=15; /* Speed of effect fastest=1 : slowest=99 */
var mixmsgs=0; /* randomize images/text=1 : in order=0 */
var preld=1; /* preload images=1 : no preload=0 */
/* ['IMAGEsrcORtext','URLdestination','OPENinNEWwindowORnot',type of fxin(1-7),type of fxout(1-7)], (no comma on last entry) */
var msg=[
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/Antarcticadecember2005192.jpg" border="0" >','http://www.<i>pebble</i>league.com','_blank',1,1] ,
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/Antarcticadecember2005191.jpg" border="0" >','http://www.<i>pebble</i>league.com','_blank',7,7] ,
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/photo3.jpg" border="0">','http://www.<i>pebble</i>league.com','_blank',3,3] ,
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/photo2.jpg" border="0">','http://www.<i>pebble</i>test.proboards.com','_top',4,4] ,
['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/photo1.jpg" border="0"></a>','http://www.<i>pebble</i>test2.proboards.com','_self',5,5] ,
['Welcome '+pb_displayname+' To <i>pebble</i>test2. Click Here To Go To <i>pebble</i>league.com','http://www.<i>pebble</i>league.com','_blank',6,6] ,
['And you can add some text to this as well. PHOTOS COPYRIGHT OF <i>pebble</i>','http://www.<i>pebble</i>test.proboards.com','_top',2,2] // no comma on last entry
];
/* DO NOT TOUCH ANYTHING BELOW HERE */
var clipright=0;
var cliptop=0;
var clipbottom=0;
var clipleft=0;
var msgcount=-1;
var isMSIE = /*@cc_on!@*/0;
if(preld){for (i=0; i<msg.length-1;i++){
var patt=/img/gi
if(msg[i][0].match(patt)){document.write('<div id="prld">'+msg[i][0]+'</div>')}}}
function fxin(){
switch(msg[msgcount][3]){
case 1:
if (parseInt(document.getElementById('scrlrtext').style.top)>0) {
clipbottom+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)-step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 2:
if ((parseInt(document.getElementById('scrlrtext').style.left))>0) {
clipright+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)-step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 3:
if (parseInt(document.getElementById('scrlrtext').style.left)<0) {
clipleft-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)+step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 4:
if (parseInt(document.getElementById('scrlrtext').style.top)<0) {
cliptop-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)+step
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 5:
if (cliptop>0){
cliptop-=step
clipbottom+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
} break;
case 6:
if (clipleft>0){
clipleft-=step
clipright+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
}break;
case 7:
if(cliptop>0||clipleft>0){
if (cliptop>0){
cliptop-=(step/2+(scrlrheight/scrlrwidth))
clipbottom+=(step/2+(scrlrheight/scrlrwidth))}
if(clipleft>0){
clipleft-=(step/2+(scrlrwidth/scrlrheight))
clipright+=(step/2+(scrlrwidth/scrlrheight))}
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxin()",fxspd)}
else {
clearTimeout(timer)
var timer=setTimeout("fxout()",stilltime)
}}}
function fxout(){
switch(msg[msgcount][4]){
case 1:
if (parseInt(document.getElementById('scrlrtext').style.top)>-scrlrheight) {
cliptop+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)-step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 3:
if (parseInt(document.getElementById('scrlrtext').style.left)<scrlrwidth) {
clipright-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)+step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 2:
if (parseInt(document.getElementById('scrlrtext').style.left)>-scrlrwidth) {
clipleft+=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.left=parseInt(document.getElementById('scrlrtext').style.left)-step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 4:
if (parseInt(document.getElementById('scrlrtext').style.top)<scrlrheight) {
clipbottom-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.getElementById('scrlrtext').style.top=parseInt(document.getElementById('scrlrtext').style.top)+step
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
} break;
case 5:
if (cliptop<scrlrheight/2) {
cliptop+=step
clipbottom-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 7:
if(cliptop<scrlrheight/2||clipleft<scrlrwidth/2){
if(cliptop<scrlrheight/2){
cliptop+=(step/2+(scrlrheight/scrlrwidth))
clipbottom-=(step/2+(scrlrheight/scrlrwidth))}
if(clipleft<scrlrwidth/2){
clipleft+=(step/2+(scrlrwidth/scrlrheight))
clipright-=(step/2+(scrlrwidth/scrlrheight))}
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}break;
case 6:
if (clipleft<scrlrwidth/2) {
clipleft+=step
clipright-=step
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
var timer=setTimeout("fxout()",fxspd)}
else {clearTimeout(timer)
nxtmsg()
}}}
function nxtmsg(){
clipright=0;
cliptop=0;
clipbottom=0;
clipleft=0;
document.getElementById('scrlrtext').style.top=0
document.getElementById('scrlrtext').style.left=0
msgcount++
if (msgcount>msg.length-1) {msgcount=0}
if (mixmsgs){msgcount=(Math.floor(Math.random()*(msg.length)))}
document.getElementById('scrlrtext').innerHTML="<table cellpadding=0 cellspacing=0><tr><td class='txtscr'><a href='"+msg[msgcount][1]+"' class='txtscr' target='"+msg[msgcount][2]+"'>"+msg[msgcount][0]+"</a></td></tr></table>"
if (msg[msgcount][3]==1){
clipright=scrlrwidth
document.getElementById('scrlrtext').style.top=scrlrheight }
else if (msg[msgcount][3]==2){
clipbottom=scrlrheight
document.getElementById('scrlrtext').style.left=scrlrwidth }
else if (msg[msgcount][3]==3){
clipright=scrlrwidth
clipbottom=scrlrheight
clipleft=scrlrwidth
document.getElementById('scrlrtext').style.left=-scrlrwidth }
else if (msg[msgcount][3]==5){
cliptop=scrlrheight/2
clipright=scrlrwidth
clipbottom=scrlrheight/2+1 }
else if (msg[msgcount][3]==6){
clipright=scrlrwidth/2+1
clipbottom=scrlrheight
clipleft=scrlrwidth/2 }
else if (msg[msgcount][3]==7){
cliptop=scrlrheight/2
clipright=scrlrwidth/2+1
clipbottom=scrlrheight/2
clipleft=scrlrwidth/2 }
else if (msg[msgcount][3]==4){
cliptop=scrlrheight
clipright=scrlrwidth
clipbottom=scrlrheight
document.getElementById('scrlrtext').style.top=-scrlrheight }
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
fxin()
}
if (isMSIE) {document.write('<div id="scrlbox" style="width:'+(scrlrwidth+(2*brdr))+'px;height:'+(scrlrheight+(2*brdr))+'px;border-style:'+brdrstyl+'; border-width:'+brdr+';">')}
else {document.write('<div id="scrlbox" style="width:'+(scrlrwidth)+'px;height:'+(scrlrheight)+'px;border-style:'+brdrstyl+'; border-width:'+brdr+';background-color:'+scrollbg+';">')};
document.write('<div id="scrlrtext" style="border:none;position:absolute;width:'+(scrlrwidth)+'px;height:'+scrlrheight+'px;"></div></div>')
window.onload=nxtmsg
</script>
</center>
Edit: code updated to latest version