SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast subBlue's Avatar
    Join Date
    Jun 2001
    Location
    Edinburgh, UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling the content of an overflowing layer

    I have this script running:

    PHP Code:
    <html><head>
    <
    script language="JavaScript" type="text/JavaScript">
    var 
    i=0;
    function 
    showcontent(){
        
    document.all.myLayer.innerHTML+='Line '+i+'<br>';
        
    i++;
        
    setTimeout("showcontent()",200);
    }
    </script>
    </head>
    <body onLoad="showcontent()">
    <div id="myLayer" style="position:absolute; left:20px; top:20px; width:300px; height:150px; z-index:1; overflow: auto;"></div>
    </body></html> 
    As the function loops a new line is added to the contents of the layer. When the content is more than the height of the layer the scroll bars appear. This is fine, but what i want to be able to do is get the function to automatically scroll to the bottom of the content so the last line is always visible. Any ideas how i could do this?

    Thanks
    Become Interactive because its all gone a bit subBlue

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could use this in conjunction with an "auto-advance" script. Iv'e seen them being used before. Something like this:
    http://www.dynamicdrive.com/dynamici...e-scroller.htm
    or this:
    http://members.rogers.com/bazil/scroller.htm
    or this:
    http://www.dynamicdrive.com/dynamici...ramescroll.htm
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Enthusiast subBlue's Avatar
    Join Date
    Jun 2001
    Location
    Edinburgh, UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found out how to do it.

    Just add: document.all.myLayer.scrollTop = document.all.myLayer.scrollHeight - 150;
    into the function after i++; and it works a treat
    Become Interactive because its all gone a bit subBlue


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
  •