PDA

View Full Version : Scrolling Text


Rose
01-05-2002, 05:46 PM
Is there a way to have a scrolling message below the header and user links (cp, home, members, etc...). I'd like to have a scrolling tag that I can change daily/weekly whatever to say what I want. For instance, I run a Simpsons (tm) dedicated message board and I would like to run one of Bart's Chalkboard sayings across the board and I would change it daily. Or, I suppose it could be used to welcome members, news, anything really. Is this a hack or a template edit?

Thanks in advance,

Rose
www.simpsonsboard.com

Psychdrone
01-05-2002, 06:44 PM
this wouldn't be a hack!

All ya got to do is change the header around to your amusment

Rose
01-05-2002, 07:16 PM
Originally posted by Psychdrone
this wouldn't be a hack!

All ya got to do is change the header around to your amusment


Just add the html in the header template for a scrolling text? coolness! Thanks for the quick response.


*sheepish look* Maybe do you have the basic html for that? I can edit to my preference, but I need a base to start with. :s

Rose
01-07-2002, 09:47 PM
Anyone? :D

cyrus
01-07-2002, 11:20 PM
Hi Rose ( we meet again lol ) :D

Well, I have this at my site and have made it easy by adding a custom bbcode for it.

How to add scroll text bbcode

Go to Admin panel and ... :-

Custom vB Codes >> Add
And then add in the following info:-

vB Code tag : scroll
vB Code replacement : <table height=100 width=300><tr><td style="filter:bold(color=black strength=1);font-family:arial;font-weight: BOLD;font-size:'14'"><marquee direction="left">{param}<br></table>
vB Code example : This Scrols Across The Screen
vB Code explanation : anything you want :)
Use {option} ? : Select NO

If you want the text to scroll RIGHT, change the text in red to *right* ( without the *'s)

=============================

Ive trried makign it as simple as possible, let me know if you get stuck anywhere ;)

Byeeeeeeeeeeeeeee

Rose
01-08-2002, 02:27 PM
Thanks Cyrus!!

Actually, in my need not to be so lazy (as I was waiting for someone to respond when I could have easily looked up html code for scrolling text and edited to fit), I did search around a bit last night. I found a neat scrolling text that I like. I placed one version of scrolling in the header template and one version of another scrolling in the footer template.

I'm not sure what the problem was, but with the footer in place, the header wouldn't scroll. But I took out the footer and now everything works grand.

Sorry, I seem to have gone off topic. Again, Thanks Cyrus!! Check out www.simpsonsboard.com and let me know what you think of the scrolling! :D

sphinx
01-08-2002, 04:36 PM
very nice only wish I had more of an understanding of how it worked I could get the usual scroll text in a post but couldn't figure out where to add the scroll thing in the template anyone have an idiot proof way :) I am pretty new to html as you can probably gather,a nice effect though that you have put to work well nice one

Rose
01-08-2002, 05:54 PM
Sphinx - I can give you the code I used. I got this code from www.dynamicdrive.com. You can get loads of dhtml scripts and stuff from there, however this is the only thing I've used so far, so I don't guarantee it. :D

Anyway, for what I did I simply put the following text into my header template (below the toplinks). however, you can insert it where ever you want. Please be advised, however, that I can't offer support as I'm a cut'n'paste html newbie, too. :D

But, with a little concentration you will figure it out. If you have problems, let me know and I'll try to help, I just can't guarantee anything. ;)

<script language="JavaScript1.2">

/*
Pausing updown message scroller-
Last updated: 99/07/05 (Bugs fixed, ability to specify background image for scroller)
? Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

//configure the below five variables to change the style of the scroller
var scrollerwidth=500
var scrollerheight=35
var scrollerbgcolor='#0E3652'
//set below to '' if you don't wish to use a background image
var scrollerbackground='scrollerback.gif'

//configure the below variable to change the contents of the scroller
var messages=new Array()
messages[0]="<font face='Arial'><a href='http://www.simpsonsboard.com/ted'>Visit <b><i>The Smallville Torch</i></b></a></font>"
messages[1]="<font face='Arial'>Bart's Chalkboard Quote of the Week:</font>"
messages[2]="<font face='akbar'<i>Beans are neither fruit nor musical</i></font>"
messages[3]="<font face='Arial'><a href='http://www.simpsonsboard.com/register.php?action=signup'>Not registered? Click here!</a></font>"
messages[4]="<font face='Arial'><a href='http://www.simpsonsboard.com/showthread.php?threadid=342'>Go here for information on linking to SB.</a></font>"

///////Do not edit pass this line///////////////////////

if (messages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",3000)
setTimeout("move2(document.main.document.second)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",3000)
setTimeout("move1(document.main.document.first)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",3000)
setTimeout("move4(second2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",3000)
setTimeout("move3(first2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
second2.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>




<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:' +scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:' +scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;t op:1;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;t op:0;visibility:hidden">')
document.write(messages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>


As you can see, you don't edit past the 'do not edit past this line' line. :D And you can customize your messages up top, add an unlimited number of messages (as far as I know it's unlimited) and you can link them to a url if you'd like. Play around and have fun!

I'm at www.simpsonsboard.com or thecharmedgirl@hotmail.com

:D

sphinx
01-08-2002, 06:42 PM
many thanks I figured it out after your post above and yeah strictly a cut and paste here too gain thanks for the help you made it understandable,:cool:

Rose
01-08-2002, 07:43 PM
Anytime. :D

sphinx
01-09-2002, 11:45 AM
also figured out how to make transparrent don't know if this is of use to anyone but simply delete the line

var scrollerbgcolor='#0E3652'

Rose
01-09-2002, 12:00 PM
Ooooh! You can delete the line and it still works? I've been going in and editing the colors of the styles so that it would match the background color. *lol* Thanks!


Do you sometimes have a white line at the bottom (of the scroller)? If I adjust it too wide to fit two lines of text, I get a white break line. :(

sphinx
01-09-2002, 04:02 PM
I had the------------------------ line and just deleted that from the code,if this is what you mean other than that no no white lines if you would like a copy of my edited one let me know as I said no lines etc

Rose
01-10-2002, 05:10 PM
I'd be interested in copying your edited one to see if I still get the white line. :s

sphinx
01-10-2002, 05:39 PM
no problem as you ccan see I have removed the colour code for the transparrent background and also removed the background colour using the " command,and I get no white lines please let me know if it is ok for you ie no lines it has made me curious,I have also removed the links code as it is something I am not likely to use,ie on your board one of the scrolls is a clickable link.Like I said I am new to this so please bear with me I am a trial and error person:)



//configure the below five variables to change the style of the scroller
var scrollerwidth=500
var scrollerheight=35
var scrollerbgcolor=''
//set below to '' if you don't wish to use a background image
var scrollerbackground= ''

//configure the below variable to change the contents of the scroller
var messages=new Array()
messages[0]="<font face='Arial'><a <b><i>Welcome To Motherboardforum.Com</i></b></a></font>"
messages[1]="<font face='Arial'>you text</font>"
messages[2]="<font face='akbar'<i>goes here</i></font>"
messages[3]="<font face='Arial'>as you</a></font>"
messages[4]="<font face='Arial'>already know</a></font>"

///////Do not edit pass this line///////////////////////

if (messages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",3000)
setTimeout("move2(document.main.document.second)",3000)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",3000)
setTimeout("move1(document.main.document.first)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",3000)
setTimeout("move4(second2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",3000)
setTimeout("move3(first2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
second2.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

</script>




<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:' +scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:' +scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;t op:1;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;t op:0;visibility:hidden">')
document.write(messages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>