IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 9, 2011 18:55:42 GMT 1
Yes, that is a big help, <i>pebble</i>. If I think of anything else, I'll post again. I know what you mean about writing instructions. It is easy to leave out something because we think it is so basic, but not everyone understands at the same level.
Oh, here's one. The title of this topic includes the word - anywhere. Does that mean like in a table, or perhaps on the left or right of the board?
|
|
v5 Theme Support
Just passing through
Member Bio
Currently: Offline
Joined: April 2011
Gender: Male
Posts: 6,000
SemiTrans Signature URL - Theme id 13: http://i.imgur.com/nHnDLrx.png
Badges
|
Post by Speed on Dec 9, 2011 19:04:21 GMT 1
60 and counting and no I did not see any loading delays.
Note to JJ, the best thing to do is to put the code on a test board and paly with the variables, it is real easy to figure out and as far as the enter / exit variable I mixed them up allot. You and use any number combinations with 1 2 3 and 4
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: March 2011
Gender: Male
Posts: 2,442
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/4VPN0K_NOTLnvUJjv0Dy.png
Badges
|
Post by <i>pebble</i> on Dec 9, 2011 19:06:31 GMT 1
The code currently has <center> tags in it but it can be changed to left or right. If you mean inside Sub's peekaboo's or other table, then it should be possible - That's something I'll try out at some point just to confirm.
Cheers Speed !
Edit: Speed - The scroll in/out 1-4 don't match as i did them as i thought about them. I'm going to make it so the 'in' 1 scrolls in from the top and then the 'out' 1 scrolls out to the top. Just to uniform things. Would a variable to randomize the scroll in/out direction be of interest ? Or is it ok as it is ?
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 9, 2011 20:09:50 GMT 1
I will do that, Speed, I always try out stuff at my test site. But I have a major vision problem now that makes me see double, and once I install a code, it gets more difficult to work with. I usually put it in Notepad and make the screen really big so I can see the variables and tweak it while it's there.
Yes, that is what I was thinking, <i>pebble</i>. Like maybe at the top of table, I thought that would be cool. I recently deleted my tables, but this intrigues me. Or maybe even in the Info area, I saw someone's site over at Proboards recently that had what looked like a new cell in the info area .
This code has a lot of possibiities.
|
|
v5 Theme Support
Just passing through
Member Bio
Currently: Offline
Joined: April 2011
Gender: Male
Posts: 6,000
SemiTrans Signature URL - Theme id 13: http://i.imgur.com/nHnDLrx.png
Badges
|
Post by Speed on Dec 9, 2011 21:47:39 GMT 1
The code currently has <center> tags in it but it can be changed to left or right. If you mean inside Sub's peekaboo's or other table, then it should be possible - That's something I'll try out at some point just to confirm. Cheers Speed ! Edit: Speed - The scroll in/out 1-4 don't match as i did them as i thought about them. I'm going to make it so the 'in' 1 scrolls in from the top and then the 'out' 1 scrolls out to the top. Just to uniform things. Would a variable to randomize the scroll in/out direction be of interest ? Or is it ok as it is ? I like it the way it is but if you wanted to add an option to the code to be able to do that may be ok or put that in an optional code if someone wanted to use it that way.
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: March 2011
Gender: Male
Posts: 2,442
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/4VPN0K_NOTLnvUJjv0Dy.png
Badges
|
Post by <i>pebble</i> on Dec 10, 2011 3:53:56 GMT 1
Code update: Just added a couple of other effects , in and out, (5 and 6 in the array). If you don't want them then there's no need to update your code. I tried the diagonal in/out but it didn't really look right with rectangular boxes. I'm going to do a bit of research about the pixelating in/out effect ! Preview of new code and effects: <!-- News Scroller / Photo Slideshow (or both) with optional scroll in/out directions,randomize order and preload. All Text And Photo's Clickable To Other Locations Feel free to use but please leave this header in tact - Do not repost. By <i>pebble</i> -->
<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; border:none; } 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"> /* News Scroller Or Photo Slideshow box */
var scrlrheight=120; /* height of the box */ var txtscrwidth=150; /* width of box */ var scrollbg= '#FF0000'; /* backgroundcolor of the box set image in css */ var stilltime=3500; /* time between the messages in milliseconds*/ var scrlrborder=5; /* Border size around box */ var step=1; /* speed of scroll : 1 =smooth and slow */ var mixmsgs=0; /* randomize images/text = 1 in order=0 */ var preld=1; /* preload images=1 no preload =0 */
/* ['IMAGEsrcORtext','URLdestination','OPENinNEWwindowORnot',direction of scrollin(1-4),direction of scrollout(1-4)] , (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',6,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',5,2] , ['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/photo3.jpg" border="0">','http://www.<i>pebble</i>league.com','_blank',4,5] , ['<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',3,6] , ['<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',2,3] , ['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',1,4] , ['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',3,1] ];
/* DONT TOUCH ANYTHING BELOW HERE */
var clipright=txtscrwidth; var cliptop=0; var clipbottom=0; var clipleft=0; var msgcount=-1; var wait=20; var isMSIE = /*@cc_on!@*/0;
if(preld==1) {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 scrollin(){ 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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) } break; case 5: if (cliptop>0){ cliptop-=step clipbottom+=step document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) } break; case 6: if (clipleft>0){ clipleft-=step clipright+=step document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) }}}
function scrollout(){ 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() } break; case 2: if (parseInt(document.getElementById('scrlrtext').style.left)<txtscrwidth) { 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() }break; case 3: if (parseInt(document.getElementById('scrlrtext').style.left)>-txtscrwidth) { 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("scrollout()",wait) } 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("scrollout()",wait) } 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() }break; case 6: if (clipleft<txtscrwidth/2) { clipleft+=step clipright-=step document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() }}}
function nxtmsg(){ msgcount++ if (msgcount>msg.length-1) {msgcount=0} if (mixmsgs==1){msgcount=(Math.floor(Math.random()*(msg.length)))} document.getElementById('scrlrtext').innerHTML="<table cellpadding=0 cellspacing=0 border=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) { cliptop=0 clipright=txtscrwidth clipbottom=0 clipleft=0 document.getElementById('scrlrtext').style.top=scrlrheight document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==2) { cliptop=0 clipright=0 clipbottom=scrlrheight clipleft=0 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=txtscrwidth } else if (msg[msgcount][3]==3) { cliptop=0 clipright=txtscrwidth clipbottom=scrlrheight clipleft=txtscrwidth document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=-txtscrwidth } else if (msg[msgcount][3]==5) { cliptop=scrlrheight/2 clipright=txtscrwidth clipbottom=scrlrheight/2+1 clipleft=0 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==6) { cliptop=0 clipright=txtscrwidth/2+1 clipbottom=scrlrheight clipleft=txtscrwidth/2 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==4) { cliptop=scrlrheight clipright=txtscrwidth clipbottom=scrlrheight clipleft=0 document.getElementById('scrlrtext').style.top=-scrlrheight document.getElementById('scrlrtext').style.left=0 } document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollin() } if (isMSIE) {document.write('<div id="scrlbox" style="width:'+(txtscrwidth+(2*scrlrborder))+'px;height:'+(scrlrheight+(2*scrlrborder))+'px;border-style:solid; border-width:'+scrlrborder+';">') } else {document.write('<div id="scrlbox" style="width:'+(txtscrwidth)+'px;height:'+(scrlrheight)+'px;border-style:solid; border-width:'+scrlrborder+';background-color:'+scrollbg+';">') }; document.write('<div id="scrlrtext" style="border:none;position:absolute;width:'+(txtscrwidth)+'px;height:'+scrlrheight+'px;top:-1000px"></div></div>') window.onload=nxtmsg </script> </center>
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 10, 2011 4:00:14 GMT 1
Oh my, <i>pebble</i>, I love this code.
Question: The background splits and does neat things to expose the graphic with a smooth animated effect, is the split covered in the code or do you have to make multiple backgrounds?
My mind is already rapidly going through my graphics to come up will suitable ones to use in this code.
I'm off to try my hand at this. I am so excited. Thank you.
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: March 2011
Gender: Male
Posts: 2,442
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/4VPN0K_NOTLnvUJjv0Dy.png
Badges
|
Post by <i>pebble</i> on Dec 10, 2011 4:05:16 GMT 1
Just the one background needed JJ No extras needed. The code does the rest. You can make a background to fit your box or if it's smaller than your box it'll repeat to fill it.
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 10, 2011 4:07:57 GMT 1
I want a rectangle, so I am scrambling through my graphics looking for things that are wider rather than square. This is like an early Christmas!
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 10, 2011 5:37:16 GMT 1
This is the first time I have really felt like "owning" a code in many months. Too much information, but I've had a really lousy year and a half because of a detached retina and five surgeries, but I am in love with this code. And wouldn't you know, it's Friday night, the interenet is acting up, Proboards is acting up and I cannot do a darned thing without repeating and repeating. Grrrrrr!!! <i>pebble</i>, is it possible to add an image for the border color, please? By that, I mean just a regular gradient/backbground, not a frame. P.S. Here it is in operation, <i>pebble</i>, and I am crazy about the possibilities. No, it isn't finished, need some work, but you will see it in place. jetsky.proboards.com/index.cgi
|
|
Deleted
Member Bio
Currently: Offline
Joined: January 1970
Gender: Undisclosed
Posts: 0
|
Post by Deleted on Dec 10, 2011 11:40:21 GMT 1
<i>pebble</i> my friend, you do realize this kick-ass code will definitely go into our database once this is finished, right? (with your permission of course) So, take your time, collect any feedback you can, then write some nice instructions for our members and prepare for all the praise on this wonderful project.
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: March 2011
Gender: Male
Posts: 2,442
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/4VPN0K_NOTLnvUJjv0Dy.png
Badges
|
Post by <i>pebble</i> on Dec 10, 2011 13:46:34 GMT 1
Another code change ! (for JJ and others that may want it) This one gives an option for the border style around the box - Don't want it ? No need to update your code !
JJ - Copy/paste your code into notepad and replace it with this one. You can paste back in the var msg=[ section with your images in (looks great by the way !) and your var values should be quick to type back in.
In the 'vars' there's now an option to change the appearance of the border. Have a play about and try them all to see which one you like - Choose from 'ridge' , 'double' , 'groove' , 'outset' and 'solid'. I hope that's what you were looking for !
Tested in IE9 and FF8
<!-- News Scroller / Photo Slideshow (or both) with optional scroll in/out directions,randomize order and preload. All Text And Photo's Clickable To Other Locations Feel free to use but please leave this header in tact - Do not repost. By <i>pebble</i> -->
<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"> /* News Scroller Or Photo Slideshow box */
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; /* time between the messages in milliseconds*/ var brdr=10; /* Border size around box */ var brdrstyl='ridge'; /* border style */ var step=1; /* speed of scroll : 1 =smooth and slow */ var mixmsgs=0; /* randomize images/text = 1 in order=0 */ var preld=1; /* preload images=1 no preload =0 */
/* ['IMAGEsrcORtext','URLdestination','OPENinNEWwindowORnot',direction of scrollin(1-6),direction of scrollout(1-6)] , (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',6,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',5,2] , ['<img src="http://i1136.photobucket.com/albums/n494/<i>pebble</i>league/photo3.jpg" border="0">','http://www.<i>pebble</i>league.com','_blank',4,5] , ['<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',3,6] , ['<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',2,3] , ['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',1,4] , ['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',3,1] ];
/* DONT TOUCH ANYTHING BELOW HERE */
var clipright=scrlrwidth; var cliptop=0; var clipbottom=0; var clipleft=0; var msgcount=-1; var wait=20; var isMSIE = /*@cc_on!@*/0;
if(preld==1) {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 scrollin(){ 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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",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("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) } break; case 5: if (cliptop>0){ cliptop-=step clipbottom+=step document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) } break; case 6: if (clipleft>0){ clipleft-=step clipright+=step document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" var timer=setTimeout("scrollin()",wait)} else { clearTimeout(timer) var timer=setTimeout("scrollout()",stilltime) }}}
function scrollout(){ 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() } break; case 2: 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() }break; case 3: 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("scrollout()",wait) } 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("scrollout()",wait) } 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("scrollout()",wait) } 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("scrollout()",wait) } else {clearTimeout(timer) nxtmsg() }}}
function nxtmsg(){ msgcount++ if (msgcount>msg.length-1) {msgcount=0} if (mixmsgs==1){msgcount=(Math.floor(Math.random()*(msg.length)))} document.getElementById('scrlrtext').innerHTML="<table cellpadding=0 cellspacing=0 border=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) { cliptop=0 clipright=scrlrwidth clipbottom=0 clipleft=0 document.getElementById('scrlrtext').style.top=scrlrheight document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==2) { cliptop=0 clipright=0 clipbottom=scrlrheight clipleft=0 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=scrlrwidth } else if (msg[msgcount][3]==3) { cliptop=0 clipright=scrlrwidth clipbottom=scrlrheight clipleft=scrlrwidth document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=-scrlrwidth } else if (msg[msgcount][3]==5) { cliptop=scrlrheight/2 clipright=scrlrwidth clipbottom=scrlrheight/2+1 clipleft=0 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==6) { cliptop=0 clipright=scrlrwidth/2+1 clipbottom=scrlrheight clipleft=scrlrwidth/2 document.getElementById('scrlrtext').style.top=0 document.getElementById('scrlrtext').style.left=0 } else if (msg[msgcount][3]==4) { cliptop=scrlrheight clipright=scrlrwidth clipbottom=scrlrheight clipleft=0 document.getElementById('scrlrtext').style.top=-scrlrheight document.getElementById('scrlrtext').style.left=0 } document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" scrollin() } 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;top:-1000px"></div></div>') window.onload=nxtmsg </script> </center>
Cheers RAD, The instruction 'manual' is coming along nicely !
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: January 2011
Gender: Female
Posts: 998
|
Post by JJ on Dec 10, 2011 17:10:13 GMT 1
I used the new version, Pepple, and it is very dressy, much better to me. But I know some people might prefer it plain.
Now, here's my thinking. I looked in the code for the other options you mentioned, double, groove, etc., and couldn't find them. So I was afraid to experiment.
I was wondering if it would be possible to have a number thing, let's see if I can explain it. I know I have seen some codes that have a (1) for yes and a (0) for no in parts of codes. Would it make the code too bulky to have a number for the different border options? If that isn't feasible, could you make the options viewable in that / * * / section that says border style?
Also, another thought. You have the screen where the sides close on the image, and also the top and bottom, I thought of another possibility. What about on the last image, before the words start, the screen splits in the middle and opens up, is that possible? I don't know how you managed this in the first place, it all seems like magic to me.
I agree with RaD, it's a kick-ass code.
Edit: In the sentence describing the action after the last image, I meant split down the middle, vertically, I know you already have one that splits horizontally.
|
|
IOD Supporter
Member Bio
Currently: Offline
Joined: March 2011
Gender: Male
Posts: 2,442
SemiTrans Signature URL - Theme id 13: http://storage.proboards.com/2815617/i/4VPN0K_NOTLnvUJjv0Dy.png
Badges
|
Post by <i>pebble</i> on Dec 11, 2011 0:21:02 GMT 1
Hi JJ, Regarding the border styles, I'll explain it better when I do the instructions! But here we go with a quick explanation:
In this part of the code:
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; /* time between the messages in milliseconds*/ var brdr=10; /* Border size around box */ var brdrstyl='ridge'; /* border style */ var step=1; /* speed of scroll : 1 =smooth and slow */ var mixmsgs=0; /* randomize images/text = 1 in order=0 */ var preld=1; /* preload images=1 no preload =0 */
You now have the extra var brdrstyl ( highlighted in yellow). You can change the word 'ridge' (remembering the ' on either side) to any of these words for a different border style/effect.
The different possibilties are: 'ridge'; 'double'; 'groove ; 'outset'; 'inset'; 'solid'; --------------------------------------- I thought about the effect you mentioned but thought it might look a bit wierd ! I'll put it in as an option anyway for you to try next time I put up a code update.
|
|
v5 Theme Support
Just passing through
Member Bio
Currently: Offline
Joined: April 2011
Gender: Male
Posts: 6,000
SemiTrans Signature URL - Theme id 13: http://i.imgur.com/nHnDLrx.png
Badges
|
Post by Speed on Dec 11, 2011 17:37:07 GMT 1
Code update: Just added a couple of other effects , in and out, (5 and 6 in the array). If you don't want them then there's no need to update your code. I tried the diagonal in/out but it didn't really look right with rectangular boxes. I'm going to do a bit of research about the pixelating in/out effect ! Preview of new code and effects: This is the bomb! Check it out on that site I sent you, if you want
|
|