Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    continuous scrolling text

    I have this script
    Code:
    <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.

  • #2
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Hey mate

    can you post the rest of the page please

    cheers!

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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

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

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    may be worth looking at this

    Code:
    <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;"  >
    
    <!-- ADD YOUR SCROLLER COMMENT INSIDE HERE--------------------->
    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;"  >
    
    <!-- ADD YOUR SCROLLER COMMENT INSIDE HERE--------------------->
    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>

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    hit a snag with that idea. Occasionally in IE the box loads huge.. which wont do at all :S

  • #7
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .....
    Last edited by Johnny Lang; 08-10-2005 at 11:04 AM.

  • #8
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    just a question... what happens if I have more than 26 items?

  • #9
    New Coder
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .....
    Last edited by Johnny Lang; 08-10-2005 at 11:05 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •