Forum Moderators: open

Message Too Old, No Replies

Help with Javascript Scoller

         

watermark

9:17 pm on Feb 8, 2005 (gmt 0)

10+ Year Member



Hi all,

My client requested a scrolling news section on his site. I found a javascript at Dynamic Drive that does the trick (although it would be nice if it pulled info from an external file...ah well), but for the life of me, I cant get the text to center in the window!

The text and links need to be centered, not left justified, to match the rest of the section it will go into. Any ideas are appreciated.

Here is the code:

<script type="text/javascript">

/***********************************************
* Pausing updown message scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [dynamicdrive.com...] for full source code
***********************************************/

//configure the below five variables to change the style of the scroller
var scrollerdelay='5000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='250px'
var scrollerheight='75px'
var scrollerbgcolor='white'
//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='Verdana'>Upcoming Events</font>"
messages[1]="<font size='1' face='Verdana'><a href='http://javascriptkit.com'>Feb 8, 2005<br>Trial Meeting Event<br>Reading, PA</a></font>"
messages[2]="<font size='1' face='Verdana'><a href='http://www.codingforums.com'>Feb 8, 2005<br>Best Practices for Sales Managers/Owners<br>Reading, PA</a></font>"
messages[3]="<font size='1' face='Verdana'><a href='http://www.freewarejava.com'>Feb 16, 2005<br>Lancaster Chamber of Commerce-SOHO Speaker<br>How to Sell to a Group<br>Lancaster, PA</a></font>"
messages[4]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 2, 2005<br>Trial Meeting Event<br>Lancaster, PA</a></font>"
messages[5]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 8, 2005<br>Trial Meeting Event<br>Reading, PA</a></font>"
messages[6]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 8, 2005<br>Best Practices for Sales Managers/Owners<br>Reading, PA</a></font>"
messages[7]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 16, 2005<br>Lancaster Chamber of Commerce-SOHO Speaker<br>The 10 Fatal Errors in Selling<br>Lancaster, PA</a></font>"
messages[8]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 23, 2005<br>Trial Meeting Event<br>Reading, PA</a></font>"
messages[9]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 23, 2005<br>Best Practices for Sales Managers/Owners<br>Reading, PA</a></font>"
messages[10]="<font size='1' face='Verdana'><a href='http://dynamicdrive.com/link.htm'>Mar 30, 2005<br>Trial Meeting Event<br>Reading, PA</a></font>"

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

var ie=document.all
var dom=document.getElementById

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

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",scrollerdelay)
setTimeout("move2(document.main.document.second)",scrollerdelay)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.top=parseInt(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)",scrollerdelay)
setTimeout("move1(document.main.document.first)",scrollerdelay)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.top=parseInt(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 (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",scrollerdelay)
setTimeout("move4(second2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.top=parseInt(scrollerheight)
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",scrollerdelay)
setTimeout("move3(first2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",50)
}
else{
tdiv2.style.top=parseInt(scrollerheight)
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie¦¦dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(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[dyndetermine=(messages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

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

2oddSox

9:37 pm on Feb 8, 2005 (gmt 0)

10+ Year Member



You could try aligning the divs in the code section at the end:

e.g.

<script language="JavaScript1.2">
if (ie¦¦dom){
document.writeln('<div align="center" id="main2" style="position:relative;width:'+scrollerwidth+';height:'+...