ticker full? is there a limit to how large a string can scroll?

[rockypierre]

Hi,

I'm building a scrolling ticker, using the script from:

http://javascript.internet.com/scrol...scroller.html.

I'm scrolling a single-row table, building it by adding four cells at a time (see snippet below).

All was dandy for the first eight insertions (* four cells each time=32 cells). On the ninth, the ticker runs fine through the first eight, but then truncates (ticker breaks off and starts again) in the middle of a cell entry ("400") in the 2nd cell of the four just inserted.

The code is pasted from the identical snippet source, which leads me to suspect I've hit some limit on how much the ticker can display. Help, please?

The entire page can be seen at:

http://home.earthlink.net/~rockypier...ORKnewLogo.htm

Here's the snippet:

<td width="25%" height="23" bgcolor="#000066">
<div align="center"> <b><font size="2" color="#ff6600">INSERT MAKE</font></b></div>
</td>
<td width="27%" height="23" bgcolor="#000066">
<div align="center"> <b><font size="2" color="#ff6600">INSERT MODEL</font></b></div>
</td>
<td width="24%" height="23" bgcolor="#000066">
<div align="center"><b><font size="2" color="#ffffff"><cfoutput>#TickerDiffQ.NOFSNEW#</cfoutput></font></b></div>
</td>
<td width="12%" height="23" bgcolor="#000066">
<div align="center"><b><font size="2" color="#ff6600"><cfoutput>#TickerDiffQ.NOFSDIFF#</cfoutput></font></b></div>
</td>

and here are the params for the layer:

<SCRIPT language=JavaScript1.2>
// By Ernst Straka ([email protected] http://www.rs-systems.at/straka)
// Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html)
var l1 = 0; // left of ticker in pixel, or 0 to position relative
var t1 = 0; // top of ticker in pixel, or 0 to position relative
var w1 = 330; // width of ticker in pixel
var ie = document.all ? true : false;
var first = true;
var l2 = l1 + w1;
var l3 = l1 - l2;
var l = l2;
function tickinit() {
if (ie) {
if (l1 == 0 && t1 == 0) {
pos = document.all['tickpos'];
l1 = getLeft(pos);
t1 = getTop(pos);
}
ticktext.style.posTop = t1;
}
else {
if (l1 == 0 && t1 == 0) {
pos = document.anchors['tickpos'];
l1 = pos.x;
t1 = pos.y;
}
document.ticktext.pageY = t1;
}
l2 = l1 + w1;
l3 = l1 - l2;
l = l2;
setInterval('tick()',500);
}
function getLeft(ll) {
if (ll.offsetParent)
return (ll.offsetLeft + getLeft(ll.offsetParent));
else
return (ll.offsetLeft);
}
function getTop(ll) {
if (ll.offsetParent)
return (ll.offsetTop + getTop(ll.offsetParent));
else
return (ll.offsetTop);
}
function tick() {
l = l - 10;
if (l < l3) l = l2;
cl = l1 - l;
cr = l2 - l;
if (ie) {
ticktext.style.posLeft = l;
ticktext.style.posTop = t1;
ticktext.style.clip = "rect(auto "+cr+"px auto "+cl+"px)";
if (first) ticktext.style.visibility = "visible";
}
else {
document.ticktext.pageX = l;
document.ticktext.clip.left = cl;
document.ticktext.clip.right = cr;
if (first) document.ticktext.visibility = "show";
}
first = false;
}
</SCRIPT>

and

<a name=tickpos> </a>
<div id=ticktext
style="FONT-SIZE: 14pt; LEFT: 127px; VISIBILITY: hidden; WIDTH: 198px; FONT-FAMILY: book antiqua; POSITION: absolute; TOP: 292px; HEIGHT: 24px"><nobr></nobr>
<table width="95%" cellpadding="2">
<tr>
<!--INSERTING CELLS HERE -->

[Roy Sinclair]

I'm sure I answered this once already just last week but if you'll take a look at that script you'll see there's width defined for the ticker, larger values in that width should allow for larger content in the ticker.

[rockypierre]

Thanks for the reply. I did make some changes to the width parameter, and yes, it is possible to set the width to a figure such as, say 1400 pixels, which will accomodate the entire string of cells. But this creates further problems:

[rockypierre]

oops, continued...disregard previous

Thanks for the reply. I did make some changes to the width parameter, and yes, it is possible to set the width to a figure such as, say 1400 pixels, which will accomodate the entire string of cells. But this creates a problem:

The layer width is now so wide that it takes about 7 or 8 seconds for the ticker to become visible, entering from the right (unless you scroll horizontally to the left).

Also, the test string of cells I'm using here represents only about 10% of the final length that needs to scroll.

My objective is to have this huge string scrolling through a small layer on the page, (as in the zipped html file I've attached), so I guess the question I'm asking is:

can a dhtml ticker such as this accomodate material that is WIDER than the (visible) width specified in the script? This is what would create a true "news ticker" effect.

I've seen a beautiful one at http://www.nasdaq.com/asp/ticker.asp,
which uses a java applet.

Perhaps DHTML layering is not the best answer here...how about JAVA or FLASH?

[Roy Sinclair]

You can probably adjust the width value until it matches the actual width of the content and then you shouldn't get the wait while the content flows past blank content but why not add a little bit to the script to get the true width of the content and plug that into the width value the script uses.

objectReference.offsetWidth will get the width of the object in IE 4+ and Netscape 6+.

Try the following:

function tickinit() {
if (ie) {
if (l1 == 0 && t1 == 0) {
pos = document.getElementById('tickpos');
w1 = pos.offsetWidth
l1 = getLeft(pos);
t1 = getTop(pos);
}


I also made an additional change which may make the script work with more than just the IE browser but I have not tested this at all.

[rockypierre]

Yes, I see; getting the width of content and plugging into the width is pretty nifty.

A friend made another suggestion that might be of interest:

"Hmm…



It looks like it sets



L1 = true left most position of the ticker

L2 = L1 + W1, = right most position of the ticker

L3 = L1-L2 = exactly same distance from the point only in the negative direction so..





--------------------------------

| WINDOW IS HERE

|

|Ticker is here] can't see these values

^--------------^--------------^

L3 L1 L2



So it drags it across until it reaches L3.



So... that's how it works. If you don't care, then replace your tickitinit() function with my new code. Notice that I manually set L3 to "-1000" on line 19. This FIXES your problem. You may either set it manually, or find some other programmatic way to do it. I would set it the negative width of the ACTUAL ticker, not the displayed width.


1 function tickinit() {

2 if (ie) {

3 if (l1 == 0 && t1 == 0) {

4 pos = document.all['tickpos'];

5 l1 = getLeft(pos);

6 t1 = getTop(pos);

7 }

8 ticktext.style.posTop = t1;

9 } else {

10 if (l1 == 0 && t1 == 0) {

11 pos = document.anchors['tickpos'];

12 l1 = pos.x;

13 t1 = pos.y;

14 }

15 document.ticktext.pageY = t1;

16 }

17

18 l2 = l1 + w1;

19 l3 = -1000;

20 l = l2;

21 setInterval('tick()',50);

22 }

"