Ticker doesn't work

[dirku]

Hi.

I have a ticker scrolling the items up and downwards.
The problem is that the <DIV> in which the items should scroll does not have the size it should have. The ticker should scroll within a <TD> but it expands to the right side of the screen.

Here's the code:

<table border=1 cellpadding=0 cellspacing=0 width="100%">
<tr>
<td width="100%">
<!--
<table border=1 cellpadding=1 cellspacing=0 width="100%">
<tr>
<td width="20" align="center" valign="middle" bgcolor="#ff9900"><IMG height=17 src="/oncology/framework/skins/oncology/images/alerts.gif" width=18></td>
<td bgcolor="#ff9900"><b><font color="#ffffff">Oncology Pulse Ticker</font></b></td>
<td width="20" align="center" valign="middle" bgcolor="#ff9900"><a href="javascript:moveup()"><IMG height="17" src="/oncology/framework/skins/oncology/images/arrow_up.gif" width="18" border="0" alt="Scroll Up"></a></td>
<td width="20" align="center" valign="middle" bgcolor="#ff9900"><a href="javascript:movedown()"><IMG height="17" src="/oncology/framework/skins/oncology/images/arrow_down.gif" width="18" border="0" alt="Scroll Down"></a></td>
</tr>
</table>
-->
<table width="100%" border="1" bordercolor="#f0f0f0" cellspacing="0" cellpadding="0" bgcolor="#ff9900">
<tr>
<td>
<table border="1" cellpadding="4" cellspacing="1" width="100%">
<tr>
<td id="pulseTickerTD" width="100%" bgcolor="#ffffff">
<!--/* <SCRIPT language="JavaScript1.2">
var message = new Array();
</SCRIPT>
<SCRIPT language="JavaScript1.2" src="http://www.oncology.pharma.novartis.intra/media/majortopics/majorTopicMessages.inc"></SCRIPT>
<SCRIPT language="JavaScript1.2">
for(i=0; i<message.length; i++)
//document.getElementById("pulseTickerTD") = message[i];
document.writeln(message[i]);
</SCRIPT>
*/-->

<SCRIPT language="JavaScript1.2">
//Specify the marquee's width (in pixels)
var marqueewidth=320
//var marqueewidth = document.getElementById("pulseTickerTD").width

//Specify the marquee's height (in pixels)
var marqueeheight=85

//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1

//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1
var message = new Array()
</SCRIPT>

<SCRIPT language="JavaScript1.2" src="http://www.oncology.pharma.novartis.intra/media/majortopics/majorTopicMessages.inc"></SCRIPT>

<SCRIPT language="JavaScript1.2">
////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0) ? copyspeed : 0
var actualheight=''
var cross_marquee, ns_marquee

function populate(){
//alert("pulsTickerTD.offsetHeight = " + document.getElementById("pulseTickerTD").offsetHeight);
//alert("pulseTickerTD.width = " + document.getElementById("pulseTickerTD").style.width);
//alert("pulseTickerTD.height = " + document.getElementById("pulseTickerTD").style.height);
var allMessages = ""
cross_marquee=document.getElementById ? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.top=marqueeheight+8
cross_marquee.style.height=40
for (i=0; i<message.length; i++)
{
allMessages+=message[i];
//document.writeln(message[i]);
}
cross_marquee.innerHTML=preMessageTags + allMessages + postMessageTags
// cross_marquee.innerHTML=allMessages
actualheight=cross_marquee.offsetHeight
//actualheight=document.getElementById("pulseTickerTD").offsetHeight
//cross_marquee.style.width=315
//alert("actualheight = " + actualheight +
// "\nmarqueewidth = " + marqueewidth +
// "\nmarqueeheight = " + marqueeheight);
moveup()
//alert("nach moveUp()...\nmarqueewidth = " + marqueewidth + "\nmarqueeheight = " + marqueeheight);
}

window.onload=populate


function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)

if (parseInt(cross_marquee.style.top)>(actualheight-(marqueeheight+50)))
cross_marquee.style.top=marqueeheight-actualheight-85
else
cross_marquee.style.top=parseInt(cross_marquee.style.top)+copyspeed

movedownvar=setTimeout("movedown()",50)
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (window.moveupvar) clearTimeout(moveupvar)
//alert("parseInt(cross_marquee.style.top) = " +
//parseInt(cross_marquee.style.top + "\nactualheight*(-1)+20) = " + actualheight*(-1)+20));
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+20))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed
else
cross_marquee.style.top=marqueeheight+8

moveupvar=setTimeout("moveup()",50)
}

//alert("marqueewidth = " + marqueewidth + "\nmarqueeheight = " + marqueeheight);
with (document){
write('<div style="border-style:solid; border-color:#ff0000;position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="border-style:solid;border-color:#00ff00;position:absolute;left:0;top:0;width:marqueewidth;">')
write('</div>')
write('</div>')
alert("marqueewidth = " + marqueewidth + "\nmarqueeheight = " + marqueeheight);
alert("iemarquee.style.width = " + iemarquee.style.width + "\niemarquee.height = " + iemarquee.height);
}
</SCRIPT>

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


Any ideas?

Thank you very much in advance.

Dirk
Berlin, Germany

[Pittimann]

Hi!

Your code produces quite a lot of errors. As far as your actual question is concerned: the first table's width is set to 100%. Another thing, you have a line:
write('<div id="iemarquee" style="border-style:solid;border- color:#00ff00;position:absolute;left:0;top:0;width:marqueewidth;">')

If you replace it with:
write('<div id="iemarquee" style="border-style:solid;border- color:#00ff00;position:absolute;left:0;top:0;width:'+marqueewidth+';">')

then the alert below will show you the width, you expect.

Cheers - Pit

[dirku]

Well, of course the 'alert'-statements are just for testing purposes. However, you're right that some of them were faulty.

Concerning the tables the <DIV> is nested in:
It should be a table with more than one <TD> in a row and in one cell there should be the Ticker/Scroller taking the whole width of that cell. the Scroller is put into an own table.
BTW: Putting this code into an empty HTML skeleton the Scroller runs pretty well. So, what does cause this weird behaviour?

Here is the code again freed from some testing code and thus is more concise:


<table border=0 cellpadding=4 cellspacing=1 width="20%">
<tr>
<td width="100%" bgcolor="#ffffff">

<SCRIPT language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth=320

//Specify the marquee's height (in pixels)
var marqueeheight=85

//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=1

//Pause marquee onMousever (0=no, 1=yes)?
var pauseit=1

var message = new Array()
</SCRIPT>

<SCRIPT language="JavaScript1.2" src="http://www.oncology.pharma.novartis.intra/media/majortopics/majorTopicMessages.inc"></SCRIPT>

<SCRIPT language="JavaScript1.2">
////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''
var cross_marquee, ns_marquee

function populate(){
var allMessages = ""
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.top=marqueeheight+8
for (i=0; i<message.length; i++)
{
allMessages+=message[i];
}
cross_marquee.innerHTML=preMessageTags + allMessages + postMessageTags
actualheight=cross_marquee.offsetHeight
moveup()
}

window.onload=populate

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (window.moveupvar) clearTimeout(moveupvar)

if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+20))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed
else
cross_marquee.style.top=marqueeheight+8

moveupvar=setTimeout("moveup()",50)
}

with (document){
write('<div style="position:relative;border-style:solid;border-color:blue;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;border-style:solid;border-color:red;left:0;top:0;width:100%">')
write(</div></div>')
}
</SCRIPT>
</td>
</tr>
</table>

[Pittimann]

Hi!

Unfortunately, my browsers are still too stubborn to accept this:

<SCRIPT language="JavaScript1.2" src="http://www.oncology.pharma.novartis.intra/media/majortopics/majorTopicMessages.inc"></SCRIPT>

as valid js. The scroller does also not work, because the variables "preMessageTags" and "postMessageTags" are not defined. Even if I leave them out, the scroller doesn't have any contents... I assume the src file in the script tag above contains the necessary stuff. Anyway - I couldn't access it.

Cheers - Pit

[dirku]

Hi, Pittiman.

Of course, you can't access that file because it's a file provided from within an intranet.

However, you can just comment this out an change the definition of the Array maybe like this:

var message = new Array("Scrolltext 1", "Scrolltext 2", "Scrolltext 3")

You can even put in markups like <B>m <I> and so on in this text (try some longer texts). I just tried this out.

However, the second <DIV> (which contains the data to be displayed) does not appear/disappear at the edges of the outer <DIV>. Could it be that this is caused by the surrounding table tags to build th elayout of the site??

I have seen some other intranet seites using this ticker and there it works (but I coudln't get anyone to help me in my case) :-(

[Pittimann]

Hi!

Of course I did something like you suggested and avoided the errors (from your code posted first).

The code in your last post has a tiny mistake in the last "write" line:

write(</div></div>')
should be: write('</div></div>')

Cheers - Pit