Javascript scrollbox

[5474N]

I have recently created a webpage that involves a scrollbox.

In this scroll box I am having trouble getting the messages to show up properly. It works well, but in firefox it doesn't scroll properly.
It seems to me that the layers get a little mixed up and scroll off the screen.

** also .. as the second message scrolls up ... it doesn't show any more messages after that. NOTE THIS IS ONLY IN FIREFOX.... IN IE IT WORKS FINE

any help would be appreciated ...or any suggestions for improvement?

code examples would help.

Thanks!

below is the code I'm using

<table height="375" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="45" align="center" valign="baseline" style="background-color:#306FBE;">
<img src="images/cpomess_template_12.gif" alt="Chiefs' and Petty Officers' Mess" border="0" /></td>
</tr>
<tr>
<td valign="bottom" align="center" style="background-image:url('images/cpomess_template_14.gif');background-repeat: repeat-y; padding:0px;">
<script type="text/javascript">
//configure the below five variables to change the style of the scroller
var scrollerdelay='4000' //delay between msg scrolls. 3000=3 seconds.
var scrollerwidth='200px'
var scrollerheight='175px'
var scrollerbgcolor='white'
//set below to '' if you don't wish to use a background image
//var scrollerbackground='scrollerback.gif'
var scrollerbackground=''

//configure the below variable to change the contents of the scroller
//////////////////////////////////////////////////////////////
//messages[]="<p><font size='3'>PUB NIGHTS<br /></font></p>"

var messages=new Array()

messages[0]="<p><font size='3'>PUB NIGHTS<br />''Country and Western Night''<br />Friday, 19 August 2005<br />&nbsp;&nbsp;Music by ''Ron King''<br />Tickets on sale NOW!</font></p>"

messages[1]="<p><font size='3'>Sandwich Bar<br />Monday to Friday<br />11:30 - 12:45</font></p>"

messages[2]="<p><font size='3'>PUB NIGHT PRICES<br />$10 Ordinary/Associate members<br />$15 Life/Guests</font></p>"

messages[3]="<p><font size='3'>Bear Mountain Arena<br />CONCERT TICKETS<br />Call to enter your name in the draw!<br /></font></p>"


///////Do not edit past 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)
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)
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
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
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="&amp;{scrollerwidth};">
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[0])
</script>

</layer>
<layer id="second" left="0" top="0" width="&amp;{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>

</td>
</tr>
</table>

 

[rac2]

innerHTML is a Microsoft thing, not part of Javascript. There might be other things in that script that only work in IE.

Mozilla browser and Netscape have Javascript debugging aids that might identify the problem areas for you. In Mozilla this is the Javascript Console found on the Tools Menu under Web Development. Or type javascript: in the location box in Netscape. Firefox probably has a similar feature.

 

[BillyRayPreachersSon]

Unless you really need to support older v4 browsers, you can seriously cut that code down. I'd start by removing all references to "document.all" (ie only), relying instead on the DOM methods... and also try and remove all of the eval commands, too (they're just unnecessary).

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

From Chapter 17 of the this wonderful DHTML book:

http://www.oreilly.com/catalog/jscript4/chapter/ch17.html

Although this property is not part of the DOM API, it is a useful shortcut that is supported by Internet Explorer 4 and later and Netscape 6. Although it is not standard, it is in common use...

So the following statement is misleading.:

innerHTML is a Microsoft thing, not part of Javascript. There might be other things in that script that only work in IE.

It implies that not only is innerHTML a microsoft thing, but that it is IE specific. This is false.

I know for a fact that the following browsers fully support this wonderful shortcut method (one of the good things to come from microsoft "extending" their browser):
Safari (mac), Firefox (mac, windows), IE (from version 4), Netscape (from version 6), Opera (from version 7)

Oh, and it's been shown to be faster than using the "standard" DOM methods.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

 

[5474N]

Bah 1!!

It wasn't working because I was using an XHTML transitional DTD, rather than an HTML4.01


It took me a while to narrow it down..... but i finally got it working.