continuous scrolling text

NancyJ

08-09-2005, 02:47 PM

I have this script <Script Language=JavaScript>

var n2 = 0;
var currPos2 = 0;
var newPos2 = 1;
var isDiv2 = "";
var pauseFlag2 = true;
var isDelay2 = "";

function startScroll2(){

if (newPos2 > currPos2 && pauseFlag2)
{
currPos2 = isDiv2.scrollTop;
n2 = n2+1; // adjust '3' for speed control
isDiv2.scrollTop = n2;
newPos2 = isDiv2.scrollTop;
isDelay2 = setTimeout('startScroll2()',35) // adjust '20' for speed control
}
else if (newPos2 == currPos2)
{
if (pauseFlag2){setTimeout("toBottom2()",0)};
}
}

function toBottom2(){

n2 = 0;
currPos2 = 0;
newPos2 = 1;
isDiv2 = document.getElementById('div2');
isDiv2.scrollTop = 0;
setTimeout('startScroll2()',0); // adjust '2000' for speed
isDiv2.onmouseover=function(){pauseFlag2 = false;clearTimeout(isDelay2)}
isDiv2.onmouseout=function(){pauseFlag2 = true;startScroll2()}
}

function startStuff(){
toBottom2();
transformPic();
}
window.onload=startStuff;

</Script>
which beautifully scrolls the content of div2 but the text goes all the way off the screen before it starts again... but the client doesnt want there to be any gap. At first I thought it couldnt be done... but then I had an idea - what if there were two copies of the content so that when the first one finished it would go to the bottom and then loop around again. Can anyone help me modify this script to do that? Also, I cannot use any css positioning for this page.

martin_narg

08-09-2005, 03:25 PM

Hey mate

can you post the rest of the page please

cheers!

m_n

NancyJ

08-09-2005, 03:33 PM

The full page source is over 300 lines long and all irrelevant to the script.
The script scrolls a div (div2) the code for which goes

<div id =" div2" style='overflow:hidden;'>
//php generated content
</div>

vwphillips

08-09-2005, 03:48 PM

may be worth looking at this

<html>

<head>
<script>

var startDelay=2000;
var nowSpeed=2;
var oldSpeed=2;
var scrollInterval=50;
var ScrollAry=new Array();

function begin(){
obj=begin.arguments;
for (i=0;i<obj.length;i++){
dataobj=document.all? document.all[obj[i]] : document.getElementById(obj[i]);
ScrollAry[ScrollAry.length]=dataobj;
ScrollAry[ScrollAry.length-1].h=ScrollAry[i].parentNode.offsetHeight;
dataobj.style.top=5;
dataobj.nowSpeed=nowSpeed;
dataobj.oldSpeed=oldSpeed;
dataobj.thelength=dataobj.offsetHeight;
dataobj.parentNode.scroller=dataobj;
dataobj.parentNode.onDblClick=function(){ this.scroller.nowSpeed++; this.scroller.oldSpeed=this.scroller.nowSpeed; }
dataobj.parentNode.onClick=function(){ this.scroller.nowSpeed--; this.scroller.nowSpeed=(this.scroller.nowSpeed<=0)? 0: this.scroller.nowSpeed; this.scroller.oldSpeed=this.scroller.nowSpeed; }
dataobj.parentNode.onmouseover=function(){ this.scroller.nowSpeed=0; }
dataobj.parentNode.onmouseout=function(){ this.scroller.nowSpeed=this.scroller.oldSpeed; }
}
setTimeout('scrollNow()', startDelay);
}

function scrollNow(){
for (i=0;i<ScrollAry.length;i++){
ScrollAry[i].style.top=parseInt(ScrollAry[i].style.top)-ScrollAry[i].nowSpeed;
if (parseInt(ScrollAry[i].style.top)<ScrollAry[i].thelength*(-1)+ScrollAry[i].h){
ScrollAry[i].style.top=5;
}
}
setTimeout('scrollNow()',scrollInterval);
}

</script>

</head>

<body onload="begin('scrollbox','scrollbox2')">

<div style="position: absolute;overflow:hidden; left: 0pt; top: 10px; width: 200px; height: 200px; border:solid black 1px;" >
<div id="scrollbox" style="position: absolute; left: 0pt; top: 10px; width: 200px; height: 200px;text-Align:center;" >


MouseOver=stop<br>
MouseOut=start<br>
SingleClick=slower<br>
DoubleClick=faster<br>
This page has data in it.<br>

More data<br>
More data<br>
More data<br>
More data<br>
More data<br>
More data<br>
More data<br>
More data<br>
More data<br>

Some stuff<br>
Some stuff<br>
Some stuff<br>
Some stuff<br>
Some stuff<br>
Some stuff<br>
Some stuff<br>
</div>
</div>
<div style="position: absolute;overflow:hidden; left: 310pt; top: 10px; width: 200px; height: 100px; border:solid black 1px;" >
<div id="scrollbox2" style="position: absolute; left: 0pt; top: 10px; width: 200px; height: 200px;" >


MouseOver=stop<br>
MouseOut=start<br>
SingleClick=slower<br>
DoubleClick=faster<br>
This page has data in it.<br>

As Many as Required<br>
More data<br>
As Many as Required<br>
More data<br>
As Many as Required<br>
More data<br>
As Many as Required<br>
More data<br>
As Many as Required<br>
More data<br>
As Many as Required<br>
More data<br>
</div>
</div>
<iframe frameborder="0"></iframe>
<iframe src="Mike2.htm" width="200" height="200" marginwidth="0" marginheight="0" scrolling="no" style="position: absolute; left: 310pt; top: 210px;" ></iframe>

</body>
</html>

NancyJ

08-09-2005, 03:55 PM

thanks, but I tihnk they'd like the jumping back to the start even less than the gap... for now I've just made the content repeat 50 times - it scrolls continously for 10 minutes before you see the gap. Not a great solution but as a temporary solution it'll have to do :(

NancyJ

08-09-2005, 04:25 PM

hit a snag with that idea. Occasionally in IE the box loads huge.. which wont do at all :S

Johnny Lang

08-09-2005, 05:20 PM

.....

NancyJ

08-09-2005, 05:35 PM

just a question... what happens if I have more than 26 items?

Johnny Lang

08-09-2005, 05:49 PM

.....