Billboard script

[setishock]

1) Script Title: Billboard

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/dhtmlbillboard.htm

3) Describe problem: What command and where in the code would I insert, a command to make the output text center itself regardless of the screen resolution it's being viewed in? I have an anime forum and happened on to a transparent theme with no logo header. This script seems to fit in with the transpareticy of the theme. But the main issue is how to make it center up.

I am using VB 3.8.1 also and have inserted this script in the HEAD in the CSS page. Worked first time out by the way. I have make some suttle changes to the scriot such as adding a font-size and margin.

The following code includes the VB code for the head that was included with the theme:


<style type="text/css">

/*Modify attributes of #contentwrapper below as desired*/
#contentwrapper{
width: 890px;
height: 60px;
!-border: 1px solid black;
!-background-color: #FFFFFF;
padding: 5px;
}

.billcontent{
width: 890px;
margin-left:20px;
display:block;
font-size:50px;
}

</style>

<script type="text/javascript">

/***********************************************
* DHTML Billboard script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//List of transitional effects to be randomly applied to billboard:
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]

//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.

var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=1000 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).

var filterid=Math.floor(Math.random()*billboardeffects.length)

document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')

var selectedDiv=0
var totalDivs=0

function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}

function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>1){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}

function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}

if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill

</script>
<!- End billboard script->


<!-- logo trans -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<!-- <td align="$stylevar[outertablewidth]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td> -->
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
</td>
</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]


<!- billboard content ->
<div id="contentwrapper">

<div id="billboard0" class="billcontent">
WELCOME TO ANIMEAPPEAL.COM
</div>

<!- <div id="billboard0" class="billcontent"
First HTML content goes here. Increment id=billboard by one for every page included. ->
</div>


www.animeappeal.com That link will get you there. In the lower left corner is a theme selector. Select the Transparencity theme to see the script working.

[jscheuer1]

.billcontent{
width: 890px;
margin-left:20px;
display:block;
font-size:50px;
text-align: center;
}

[setishock]

DOH!
Thank you.

[setishock]

It didn't work. But I did manage to pin it to the left side of the header. It's most likely some conflicting position code that came with the theme.

Next question I have is, is there a typewriter effect that I can add?

[jscheuer1]

Well, right now you have a javascript error on that page from another DD script (Conveyor belt), and I don't see the billboard script operating, these could be related. Here is the error (a line break has been added where it doesn't belong):


leftrightslide[0]='<a href="http://www.animeappeal.com/forums/images/styles/webxpot_alpha/Trans BG1 images/rotate.php
" border=1></a>'


should be:


leftrightslide[0]='<a href="http://www.animeappeal.com/forums/images/styles/webxpot_alpha/Trans BG1 images/rotate.php" border=1></a>'


There could also be other problems. As to the style issue, I thought that you just wanted to center the text that is displayed within the billboard. If you want to center the actual billboard, first off don't do stuff like this:


!-border: 1px solid black;

The proper way to comment out in a stylesheet is:


/* border: 1px solid black; */

In fact, having it the way you show may even be stopping the other styles from working. Now, to center the actual billboard:


#contentwrapper{
width: 890px;
height: 60px;
/* border: 1px solid black;
background-color: #FFFFFF; */
padding: 5px;
margin: 0 auto;
}

If this and/or the other style is what you want and there is a conflict with other styles from the theme preventing it from taking effect, using the


!important

directive may solve the problem, ex:


.billcontent{
width: 890px;
margin-left:20px;
display:block;
font-size:50px;
text-align: center!important;
}

[setishock]

Hmm I didn't put the !- and the data between <>. So if I'm getting you just having the !- could be misinterped by the program and cause issues. I'll have to stop gettng in a hurry and double check my work.
As for the Conveyor belt, it's gone for now. Looks like you came by when I was making some ham handed adjustments to it. Since you run VB for your forums do you think it would work if the billboard is running in the header and the conveyor belt is running in the footer?
I'll take care of the things you pointed out. Thank you for your time.

[jscheuer1]

You shouldn't use <!-- or any variation of it inside a stylesheet, except to hide the entire stylesheet from older browsers, and even that is considered excessive by many these days. The proper form of comment for a stylesheet is as I've shown in my previous post.

I don't have anything to do with managing the forum here or anywhere else, other than as a moderator. So I cannot speak from experience as far as what will work in VB.

However, as long as the two scripts don't conflict with each other or with other scripts you are using, it should be fine.

I'm fairly familiar with Conveyor, and a closer look just now at the billboard script doesn't seem to show any obvious conflicts between the two of them.

[setishock]

I abandoned this for a bit and finally came back to it. Too many irons in the fire.
Just two more questions.
How do you change the color of the output text?
Can you change the color of the text on a line by line basis? Like each line between the div tags.

[jscheuer1]

If, as I am assuming, you mean the billboard script, there are several options. To color the text in all of the billcontent divisions:


.billcontent{
width: 890px;
margin-left:20px;
display:block;
font-size:50px;
text-align: center;
color: red;
}

If you want to color particular divisions, do not use use a color directive with the above, and do use it with each id selector for the individual content divisions:


#billboard0 {
color: red;
}
#billboard1 {
color: green;
}
#billboard2 {
color: blue;
}

Or you can put the style inline, though that is not really recommended. Once again, if any of the styles you want are not working, use the !important directive as mentioned before.