SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Auto-scrolling a DIV with overflow:scroll/auto

    I know it's possible to automatically scroll an entire HTML document. Is there a way to automatically scroll a <DIV> where the CSS overflow attribute is set to auto (and there is a forced scrollbar) or scroll?

  2. #2
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this ?
    Code:
    <body>
     <div id="ecran" style='overflow:auto;width:200px;height:200px;border:solid 1px green;'>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    
    </div>
             
    	
    <script type='text/javascript'>
    function ScrollDiv(){
    
       if(document.getElementById('ecran').scrollTop<(document.getElementById('ecran').scrollHeight-document.getElementById('ecran').offsetHeight)){-1
             document.getElementById('ecran').scrollTop=document.getElementById('ecran').scrollTop+1
             }
       else {document.getElementById('ecran').scrollTop=0;}
    }
    
    setInterval(ScrollDiv,50)
    </script> 
    </body>

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi SpaceFrog,

    Thanks for the code. While I didn't use your code byte-for-byte, I did use certain parts of it to help me along with the final code, which ended up like this:

    Code:
    <html>
    <head>
    <script language="javascript">
    ScrollRate = 100;
    
    function scrollDiv_init() {
    	DivElmnt = document.getElementById('MyDivName');
    	ReachedMaxScroll = false;
    	
    	DivElmnt.scrollTop = 0;
    	PreviousScrollTop  = 0;
    	
    	ScrollInterval = setInterval('scrollDiv()', ScrollRate);
    }
    
    function scrollDiv() {
    	
    	if (!ReachedMaxScroll) {
    		DivElmnt.scrollTop = PreviousScrollTop;
    		PreviousScrollTop++;
    		
    		ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    	}
    	else {
    		ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
    		
    		DivElmnt.scrollTop = PreviousScrollTop;
    		PreviousScrollTop--;
    	}
    }
    
    function pauseDiv() {
    	clearInterval(ScrollInterval);
    }
    
    function resumeDiv() {
    	PreviousScrollTop = DivElmnt.scrollTop;
    	ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
    }
    </script>
    </head>
    <body onLoad="scrollDiv_init()">
    <div id="MyDivName" style="overflow:auto;width:200px;height:100px" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    </body>
    </html>
    This code can:
    - Start the div scrolling down
    - Scroll back up when it reaches the end
    - Pause when the user mouses over the div
    - Resume at any location the user places the scrollbar when the user on mouses out

    Thanks!

  4. #4
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no prob ! glad it helped

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for this

    Could you please show me what to take out or add to stop it going to the top, so that it continuiously scrolls down. Or Up would be ok also, i just want one direction.

    Thanks I find this very helpfull.
    Last edited by __CRUZ__; Apr 21, 2007 at 21:29.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy old thread, batman!

    Just use clearInterval() when the scroll height is equal to the document or element height, whichever is applicable.

  7. #7
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanx for the reply, I dont understand what you said one bit sorry im not that brilliant could you plz explain or show me an example , I would like it to scroll up "only" continiously and not down, but everything else is perfect.

    I tried and changed this the line

    ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    To

    ReachedMaxScroll = DivElmnt.scrollTop >= clearInterval();
    But that just made it scroll to up then stop scrolling at the end of the text. I need it to loop so that it scrolls back up to the first line of text at the top again as in a new cycle.

    Thanx alot again for the reply, sorry to bother you lol

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ People learn best when they learn how to teach themselves

    Although, it seems I misunderstood you initially. What you need to do is use the clearInterval() function when it gets to the top, set the scrollbar to the bottom of the page, then reset the interval using setInterval(). To detect when the scrollbar is at the top of the document/element depends on the browser. I think I have given you enough step-by-step information that you can use Google to find out what you need to do with this programmatically.

  9. #9
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thsnx lots i will search and yea im learning this from scratch.

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This demo uses xAnimation.scroll to scroll a DIV.

    A related demo: xWinScrollTo


  11. #11
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow thanx man. I think this is too much for me ill see how i go.

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stick with what epp_b was saying and just use my site as one of the resources he was referring to

  13. #13
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanx alot man, I dunno where to start tho, I dont know where the bottom or the scroll starts or where to set the interval. I think i will just use the code he made and posted up there ^^^^ thatll have to do Thanks guys

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't give up!

    Have you experimented with it? For example, look at what happens when you comment out the "else" block:
    Code:
    <html>
    <head>
    <script language="javascript">
    ScrollRate = 10;
    
    function scrollDiv_init() {
    	DivElmnt = document.getElementById('MyDivName');
    	ReachedMaxScroll = false;
    	
    	DivElmnt.scrollTop = 0;
    	PreviousScrollTop  = 0;
    	
    	ScrollInterval = setInterval('scrollDiv()', ScrollRate);
    }
    
    function scrollDiv() {
    	
    	if (!ReachedMaxScroll) {
    		DivElmnt.scrollTop = PreviousScrollTop;
    		PreviousScrollTop++;
    		
    		ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
    	}
    /*
    	else {
    		ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
    		
    		DivElmnt.scrollTop = PreviousScrollTop;
    		PreviousScrollTop--;
    	}
    */
    }
    
    function pauseDiv() {
    	clearInterval(ScrollInterval);
    }
    
    function resumeDiv() {
    	PreviousScrollTop = DivElmnt.scrollTop;
    	ScrollInterval    = setInterval('scrollDiv()', ScrollRate);
    }
    </script>
    </head>
    <body onLoad="scrollDiv_init()">
    <div id="MyDivName" style="overflow:auto;width:200px;height:100px" onMouseOver="pauseDiv()" onMouseOut="resumeDiv()">
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    </div>
    </body>
    </html>

  15. #15
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i have experimented with it yes. I got it to do what u just posted above by changing that one line in my post 2. I cant make it continiously scroll tho. I dont like to give up on things i have search java scripts all day and they all look different to me, only some things are starting to look a little familar. Your site is kewl Mike very interesting and informative. Thanks alot for your assistance, there arent many sites you can get such help.

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Auto Scroller</title>
    <style type='text/css'>
    #MyDivName {
      overflow:auto;
      width:200px;
      height:100px;
    }
    </style>
    <script language="javascript">
    window.onload = function() {
      scrollDiv_init();
    };
    ScrollRate = 10;
    function scrollDiv_init() {
      DivElmnt = document.getElementById('MyDivName');
      DivElmnt.onmouseover = pauseDiv;
      DivElmnt.onmouseout = resumeDiv;
      ReachedMaxScroll = false;
      DivElmnt.scrollTop = 0;
      PreviousScrollTop  = 0;
      ScrollInterval = setInterval('scrollDiv()', ScrollRate);
    }
    function scrollDiv() {
      if (!ReachedMaxScroll) {
        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop++;
        ReachedMaxScroll = DivElmnt.scrollTop >= (DivElmnt.scrollHeight - DivElmnt.offsetHeight);
      }
      else {
        DivElmnt.scrollTop = PreviousScrollTop = 0;
        ReachedMaxScroll = false;
    /*
        ReachedMaxScroll = (DivElmnt.scrollTop == 0)?false:true;
        DivElmnt.scrollTop = PreviousScrollTop;
        PreviousScrollTop--;
    */
      }
    }
    function pauseDiv() {
      clearInterval(ScrollInterval);
    }
    function resumeDiv() {
      PreviousScrollTop = DivElmnt.scrollTop;
      ScrollInterval = setInterval('scrollDiv()', ScrollRate);
    }
    </script>
    </head>
    <body>
    <div id="MyDivName">
    11111 11111 11111<br>22222 22222 22222<br>text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text text text text text text 
    text text text text text text text text text text text text text text text text text text text<br>Almost Last Row<br>text text text<br>Last Row
    </div>
    </body>
    </html>

  17. #17
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers man That would have taken me weeks or longer at my rate . I will study the code and learn from it.

    I appreciate your help and kindness. Thanks again.

    EDITED
    Last edited by __CRUZ__; Apr 23, 2007 at 16:41.

  18. #18
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Is there a way to make it not bounce to the top atfer a complete scroll ?

    Instead could it start with the first line of text comming form the bottom upwards.

  19. #19
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anything is possible

  20. #20
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oK THANX


Bookmarks

Posting Permissions

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