InterOcean Designs - Image/text Effect Box Anywhere V2.1

InterOcean Designs :: ProBoards Codes :: ProBoard Code Database :: Image/text Effect Box Anywhere V2.1

Author

Topic: Image/text Effect Box Anywhere V2.1 (Read 851 times)

Pebble
Code Helper
IOD Supporter
member is offline

Joined: Mar 2011
Gender: Male

Posts: 1,179
Location: Here & There
Karma: 155

Image/text Effect Box Anywhere V2.1
« Thread Started on Dec 18, 2011, 9:07am »

Text/Image Effects Box Anywhere V2.1
Use it as a photo slideshow, 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 - Header, Footer, Top or Bottom, doesn't matter.
The 'box' can be any size you want, any color, borders, background image, insert any html into it so images and text can be clickable.
Optional pause length, randomization of images/text. 7 different effects in and out.
Slow motion when cursor is over box.
No use of 'marquee' , only javascript and css
Tested in IE9, Chrome, and FF8.

Image preview: http://pebbletest2.proboards.com/index.cgi?board=photo // The bigger the box, the better the effects!
Text preview: http://pebbletest2.proboards.com/index.cgi?board=text

Instructions for use:

In the code:

var scrlrheight=120;    Adjust this to your required height of the box in pixels.
var scrlrwidth=150;       Adjust this to your required width of box in pixels.
var scrollbg= '#FF0000'; This is the background color of the box - You can also set a background image in the css
var stilltime=3500;       This is the time that the image will pause once it has loaded into the box. (in Milliseconds)
var brdr=10;             This is the width of the border you require around the box in pixels.
var brdrstyl='ridge';    Change this to alter your border style. Choose from 'ridge' , 'double' , 'groove' , 'outset' , 'inset' and 'solid'.
var step=1;             Smoothness of effect (1-5) : 1=smooth but slow 4=fast but slight jump - This all dependant on the size of your box.
var fxspd=15;             Speed of effect fastest=1 : slowest=99 Choose what suits you - dependant on the size of the box.
var mixmsgs=0;          Randomize images/text=1 : in order=0 For those with only a few images/texts then in order is recommended.
var preld=1;             Preload images=1 : no preload=0 If you are using images then it's probably better to preload the images.

var msg=[
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Antarcticadecember2005192.jpg" border="0" >',1,1] ,
['IMAGEsrcORtextORhtml',type of effect in(1-7),type of effect out(1-7)] ,
['etc etc'] // (no comma on last entry)
]

'<img src="http:// url to your image" border="0">' OR 'This is the text you want to appear' Put your text here OR the url to your image OR any html you want. You MUST have the border="0" with your image src.

Effect in/out
1 Bottom to top
2 Right to left
3 Left to right
4 Top to bottom
5 Center to top/bottom
6 Center to left/right
7 Center to all borders

To add a new image/text just add a new line ['etc etc'], remembering that there is no comma at the end of the last entry.

In the CSS:

#scrlbox { background-image:url(''); Here you can add a fixed image to your box. An image smaller than your box will repeat to fill it.
Example : #scrlbox { background-image:url('http://i1136.photobucket.com/albums/n494/pebbleleague/slideshowback.png');
border-color: #FF0000; Change this to the required color of the border.

.txtscr {
font-family:verdana;
font-size:15;
color: #FFFFFF;
font-weight: bold;
text-align:center; Change these as required to alter the appearance of your text in the box.

A.txtscr { text-decoration:none; color:#FFFFFF;}
A.txtscr:visited { color:#FFFFFF;}
A.txtscr:hover { text-decoration:none; color:#FFFFFF;} Change these to alter the hover/link color and style of your text.

FAQ's:

Can I make my text/images clickable?
Yes you can! Just use the appropriate html or from photobucket you can just paste in the HTML code like this: <a href="http://s1136.photobucket.com/albums/n494/pebbleleague/?action=view&current=Antarcticadecember2005192.jpg" target="_blank"><img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Antarcticadecember2005192.jpg" border="0" alt="Photobucket"></a>
and changing the parts in green as needed.

What size images can I use?
Any size you want! But try to keep the memory size to a minimum where possible. Your image sizes should match the size of the box.

I am thinking that I want to put this on the main page only. So would the code go in the Main Header or Footer?
Depends where you want it ! Header or footer, it doesn't matter, depending if you want it above or below your board.

I don't ever use the News fader, is this connected to that part of the board?
No , it's nothing to do with the proboards news fader , it's totaly independant , so leave it switched off.

Can the length of time the image stays on the screen be adjusted?
Yes, just change the var stilltime to the number of seconds you want it to pause *1000 (the number is in milliseconds , just increase it to have the image pause for longer.)

How do you set the images up so that one comes in from the left, top, bottom, right?
In the var msg=[ part where you will put your links, the last two numbers are the effect in, (second to last 1-7) and the effect out (last number 1-7).

Is there a limit to the number of images that would be most efficient?
No , no limit at all. One member of IOD has 60+ images !

How do I position the box ?
You can position the box by putting the code in your headers/footers where you want it to appear. The easiest way of positioning the box on the screen is to then add <center></center> (or left or right) tags around the javascript code.

Is this going to affect the member's load time for the board?
It shouldn't affect the load time of the page as the effects only start once the full page is loaded. (if you have adverts on your forum, you'll notice that it won't start until the adverts are loaded) If you set it so that it preloads the images it will improve the performance of the scrolling once the page has loaded.

And now you've read this far - Here's the code:-

Location = Where ever you want the code to appear.

Code:
<script type="text/javascript">
/* V2.1 Text Scroller / Photo Slideshow (or both) with optional scroll in/out directions, */
/* random order, preload, written by Pebble. */
/* Feel free to use but please leave this header in tact - Do not repost.*/
/* go to [url]http://interoceandesigns.com/index.cgi?board=proboardcodedatabase&action=display&thread=2336[/url] for the original code */

var scrlrheight=31;       /* height of the box */
var scrlrwidth=88;         /* width of box */
var scrollbg= '#1627AB';    /* backgroundcolor of the box set image in css */
var stilltime=3500;         /* pause time of the text/image in milliseconds*/
var brdr=1;                /* Border size around box */
var brdrstyl='solid';       /* border style */
var step=1;                /* smoothness of effect : 1=smooth but slow */
var fxspd=9;               /* 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 */

var msg=[
['Welcome',3,3] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/AffilCimg.png" border="0" />',1,5] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil3.png" border="0" />',3,3] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil4.png" border="0" />',4,4] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil5.png" border="0" />',5,5] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil6.png" border="0" />',6,6] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil2.png" border="0" />',7,7] ,
['**code**',3,6]   // no comma on last entry
];

/* DO NOT TOUCH ANYTHING BELOW HERE */
function fxin(){
switch(msg[msgcount][1]){
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][2]){
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 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 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 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 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();}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;
}}

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'>"+msg[msgcount][0]+"</td></tr></table>"
switch(msg[msgcount][1]){
case 1:
    clipright=scrlrwidth;
    document.getElementById('scrlrtext').style.top=scrlrheight; break;
case 2:
    clipbottom=scrlrheight;
    document.getElementById('scrlrtext').style.left=scrlrwidth; break;
case 3:
    clipright=scrlrwidth; clipbottom=scrlrheight; clipleft=scrlrwidth;
    document.getElementById('scrlrtext').style.left=-scrlrwidth; break;
case 4:
    cliptop=scrlrheight; clipright=scrlrwidth; clipbottom=scrlrheight;
    document.getElementById('scrlrtext').style.top=-scrlrheight;break
case 5:
    cliptop=scrlrheight/2; clipright=scrlrwidth; clipbottom=scrlrheight/2+1; break;
case 6:
    clipright=scrlrwidth/2+1; clipbottom=scrlrheight; clipleft=scrlrwidth/2; break;
case 7:
cliptop=scrlrheight/2; clipright=scrlrwidth/2+1; clipbottom=scrlrheight/2; clipleft=scrlrwidth/2}
document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")";
    fxin()
}
var clipright, cliptop, clipbottom, clipleft, msgcount=-1, timeonout=fxspd, isMSIE=(document.uniqueID)?true:false;
var nL=[], count=0, patt=/src=('|")((.+)?\.(jpg|gif|png))/i;
if(preld){ for(var i=0; i<msg.length-1;i++){
      if(patt.test(msg[i][0])){ nL[count]=new Image; nL[count].src=RegExp.$2; count++;}}}
if (isMSIE) {document.write('<div id="scrlbox" onmouseover="fxspd=999" onmouseout="fxspd=timeonout" style="background-color:'+scrollbg+';width:'+(scrlrwidth+(2*brdr))+'px;height:'+(scrlrheight+(2*brdr))+'px;border-style: '+brdrstyl+'; border-width:'+brdr+';">')}
else {document.write('<div id="scrlbox" onmouseover="fxspd=999" onmouseout="fxspd=timeonout" 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.attachEvent)?window.attachEvent("onload",nxtmsg):window.addEventListener("load",nxtmsg,false);
</script>

And here's the CSS:

Location = anywhere above the code.

Code:
<style type="text/css">
#scrlbox {
background-image:url('http://i1136.photobucket.com/albums/n494/pebbleleague/slideshowback.png');
border-color: #1627ab;
position:relative;
overflow-x:hidden;
}
.txtscr {
font-family:verdana;
font-size:16;
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>

EDIT: 29/12/11 - Added a slow motion effect when putting your cursor over the box.
EDIT: 03/04/12 - Improved Preload (thanks to SubDevo) and other minor code improvements.

« Last Edit: Apr 4, 2012, 7:25pm by Pebble »

Link to Post - Back to Top IP:

Logged

Pebble
Code Helper
IOD Supporter
member is offline

Joined: Mar 2011
Gender: Male

Posts: 1,179
Location: Here & There
Karma: 155

Re: Image/text Effect Box Anywhere V2.1
« Reply #1 on Apr 4, 2012, 7:32pm »

Same code as above but compacted for improved load time. Now 13% smaller in size.

Code:
<script type="text/javascript">
/* V2.1 Text Scroller / Photo Slideshow (or both) with optional scroll in/out directions, */
/* random order, preload, written by Pebble. */
/* Feel free to use but please leave this header in tact - Do not repost.*/
/* [url]http://interoceandesigns.com[/url] for original code */

var scrlrheight=31;         /* height of the box */
var scrlrwidth=88;          /* width of box */
var scrollbg= '#1627AB';    /* backgroundcolor of the box set image in css */
var stilltime=3500;          /* pause time of the text/image in milliseconds*/
var brdr=1;                /* Border size around box */
var brdrstyl='solid';       /* border style */
var step=1;                  /* smoothness of effect : 1=smooth but slow */
var fxspd=9;                /* 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 */

var msg=[
['Welcome',3,3] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/AffilCimg.png" border="0" />',1,5] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil3.png" border="0" />',3,3] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil4.png" border="0" />',4,4] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil5.png" border="0" />',5,5] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil6.png" border="0" />',6,6] ,
['<img src="http://i1136.photobucket.com/albums/n494/pebbleleague/Affil2.png" border="0" />',7,7] ,
['**code**',3,6]   // no comma on last entry
];

/* DO NOT TOUCH ANYTHING BELOW HERE */
function fxin(){
switch(msg[msgcount][1]){
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][2]){
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 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 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 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 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()}; 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()}}
}

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'>"+msg[msgcount][0]+"</td></tr></table>";
switch(msg[msgcount][1]){
case 1:clipright=scrlrwidth; document.getElementById('scrlrtext').style.top=scrlrheight; break;
case 2:clipbottom=scrlrheight; document.getElementById('scrlrtext').style.left=scrlrwidth; break;
case 3:clipright=scrlrwidth; clipbottom=scrlrheight; clipleft=scrlrwidth; document.getElementById('scrlrtext').style.left=-scrlrwidth; break;
case 4:cliptop=scrlrheight; clipright=scrlrwidth; clipbottom=scrlrheight; document.getElementById('scrlrtext').style.top=-scrlrheight; break;
case 5:cliptop=scrlrheight/2; clipright=scrlrwidth; clipbottom=scrlrheight/2+1; break;
case 6:clipright=scrlrwidth/2+1; clipbottom=scrlrheight; clipleft=scrlrwidth/2; break;
case 7:cliptop=scrlrheight/2; clipright=scrlrwidth/2+1; clipbottom=scrlrheight/2; clipleft=scrlrwidth/2}document.getElementById('scrlrtext').style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"; fxin()
}
var clipright,cliptop,clipbottom,clipleft,msgcount=-1,timeonout=fxspd,isMSIE=(document.uniqueID)?true:false; var nL=[],count=0,patt=/src=('|")((.+)?\.(jpg|gif|png))/i; if(preld){for(var i=0; i<msg.length-1; i++){if(patt.test(msg[i][0])){nL[count]=new Image; nL[count].src=RegExp.$2; count++}}}if(isMSIE){document.write('<div id="scrlbox" onmouseover="fxspd=999" onmouseout="fxspd=timeonout" style="background-color:'+scrollbg+'; width:'+(scrlrwidth+(2*brdr))+'px; height:'+(scrlrheight+(2*brdr))+'px; border-style:'+brdrstyl+'; border-width:'+brdr+'; ">')}else{document.write('<div id="scrlbox" onmouseover="fxspd=999" onmouseout="fxspd=timeonout" 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.attachEvent)?window.attachEvent("onload",nxtmsg):window.addEventListener("load",nxtmsg,false);
</script>

« Last Edit: Aug 27, 2012, 3:43am by Pebble »

Link to Post - Back to Top IP:

Logged

Speed
Moderator
v5 Theme Support
member is offline

[avatar]

The Vortex

Joined: Apr 2011
Gender: Male

Posts: 5,571
Location: In The Vortex Of IOD
Karma: 215

Re: Image/text Effect Box Anywhere V2.1
« Reply #2 on Aug 26, 2012, 7:48pm »

Pebble I would like to style the color of the border around the slide show, Is this possible?

Link to Post - Back to Top IP:

Logged

WARNING FOR [ME]! DO NOT CLICK HERE!

Pebble
Code Helper
IOD Supporter
member is offline

Joined: Mar 2011
Gender: Male

Posts: 1,179
Location: Here & There
Karma: 155

Re: Image/text Effect Box Anywhere V2.1
« Reply #3 on Aug 27, 2012, 8:26am »

Aug 26, 2012, 7:48pm, Speed wrote:

Pebble I would like to style the color of the border around the slide show, Is this possible?

Hi Speed,
The color is changeable in the CSS here:

<style type="text/css">
#scrlbox {
background-image:url('http://i1136.photobucket.com/albums/n494/pebbleleague/slideshowback.png');
border-color: #1627ab;
position:relative;
overflow-x:hidden;
}

I'm not sure why I didn't put this in the vars as I added the other bits for styling the border :-/

When I get some time I'll add it to the vars and the code.

Link to Post - Back to Top IP:

Logged

Speed
Moderator
v5 Theme Support
member is offline

[avatar]

The Vortex

Joined: Apr 2011
Gender: Male

Posts: 5,571
Location: In The Vortex Of IOD
Karma: 215

Re: Image/text Effect Box Anywhere V2.1
« Reply #4 on Aug 27, 2012, 9:19am »

No worries Pebble, thank you for your quick response.

Much appreciated!
#Speed

Link to Post - Back to Top IP:

Logged

WARNING FOR [ME]! DO NOT CLICK HERE!