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 7 of 7
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Scroll Bar Bottom Problem

    Running a loop that checks the position of the scroll bar. If the scroll bar height is the same as its div container it is always positioned at the bottom.

    Else the scroll bar is not positioned at the bottom and allowed to scroll freely.

    Problem I am having is telling the scroll bar to be positioned back at the bottom if the user scrolls to the bottom again.

    Here is my Complete code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {text-align:center;}
    body div, body p {text-align:left;}
    #chatBox {width:600px;  margin-left:auto; margin-right:auto;}
    #chat {width:500px; height:300px; overflow:scroll; float:left;}
    #message{width:500px; float:left;}
    
    #users {width:100px; overflow:scroll; float:right; height:280px;}
    </style>
    
    <script type="text/javascript">
    function getLoop()
    {
    	var chat = document.getElementById("chat");
    	var newMessage = document.createTextNode("asdffffffffffffff");
    	var breaker = document.createElement("br");
    	
    	if (chat.scrollTop == chat.scrollHeight)
    	{
    	 chat.scrollTop = chat.scrollHeight;
    	}
    	else{}
    	
    	chat.appendChild(newMessage);
    	chat.appendChild(breaker);
    	chat.appendChild(breaker);
    		
    	reLoop();
    }
    
    function reLoop()
    {
    	setTimeout("getLoop()",300);
    }
    
    </script>
    </head>
    
    <body onload="reLoop()">
    <div id="chatBox">
      <div id="chat">
                asdffffffffffffff<br />
                                                                                                  
      </div>
      		<div style="width:100px; float:right;">Users</div>
    		<div id="users">
      </div>        
            <input type="text" id="message" />
          		<button onclick="sendMessage()">Send</button>
        </div>
    </body>
    </html>
    Any help is much appreciated!

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Lol good call, unfortunately that is where I got the code in the first place.

    I wanted to extend that script a little so that while my box is being filled up with content the user can break away from the continues "scroll bar at bottom" and freely scroll about. Then if the user desired to go back to the scroll bar being position at the bottom they simply scroll to the bottom of the content.

    God this is harder to explain than I thought lol.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Look on this page. It does exactly what you want. It's the link from this page
    http://radio.javaranch.com/pascarell...837038219.html

  • Users who have thanked TinyScript for this post:

    ubh (03-23-2009)

  • #5
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    Very good, I over looked that link! Working perfect now.

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Oh, I see you want it to stick to the bottom if they put it back. Well, this script does exactly that
    Code:
    <script type="text/javascript">
    
      var chatscroll = new Object();
    
      chatscroll.Pane = function(scrollContainerId){
        this.bottomThreshold = 20;
        this.scrollContainerId = scrollContainerId;
        this._lastScrollPosition = 100000000;
      }
    
      chatscroll.Pane.prototype.activeScroll = function(){
    
        var _ref = this;
        var scrollDiv = document.getElementById(this.scrollContainerId);
        var currentHeight = 0;
        
        var _getElementHeight = function(){
          var intHt = 0;
          if(scrollDiv.style.pixelHeight)intHt = scrollDiv.style.pixelHeight;
          else intHt = scrollDiv.offsetHeight;
          return parseInt(intHt);
        }
    
        var _hasUserScrolled = function(){
          if(_ref._lastScrollPosition == scrollDiv.scrollTop || _ref._lastScrollPosition == null){
            return false;
          }
          return true;
        }
    
        var _scrollIfInZone = function(){
          if( !_hasUserScrolled || 
              (currentHeight - scrollDiv.scrollTop - _getElementHeight() <= _ref.bottomThreshold)){
              scrollDiv.scrollTop = currentHeight;
              _ref._isUserActive = false;
          }
        }
    
    
        if (scrollDiv.scrollHeight > 0)currentHeight = scrollDiv.scrollHeight;
        else if(scrollDiv.offsetHeight > 0)currentHeight = scrollDiv.offsetHeight;
    
        _scrollIfInZone();
    
        _ref = null;
        scrollDiv = null;
    
      }
    
    
    
    
    
    
    
    
    
      var timer;
      var divScroll = new chatscroll.Pane('divExample');
    
      window.onload = function(){
        timer = window.setInterval("AddRow()",221);
      }
    
    
    
    
    
    
    
    
    
      var i = 0
      var iDir = 1;
      var intStop = 1.5*60*1000;
      var timeStart = new Date();
      function AddRow(){
    
        var newDiv = document.createElement("div");
        newDiv.style.backgroundColor = "rgb(" + i*1 + "," + i*3 + "," + i*2 + ")";
        newDiv.style.color = "#FFFFFF";
        i+=iDir;
        if(i==75||i==0)iDir*=-1;
        var d = new Date();
        newDiv.innerHTML = d.getHours().fPad(1) + ":" +
        d.getMinutes().fPad(2) + ":" +
        d.getSeconds().fPad(2) + ":" +
        d.getMilliseconds().fPad(3);
    
        var objDiv = document.getElementById("divExample");
        objDiv.appendChild(newDiv);
        objDiv = null;
        divScroll.activeScroll();
    
        if(d - timeStart >= intStop){
          window.clearInterval(timer);
        }
    
    
      }
    
      Number.prototype.fPad = function(intD){
        var strNum = this.toString();
        for(var j=strNum.length;j<intD;j++){
          strNum = "0" + strNum;
        }
        return strNum;
       }
    
    </script>
    <div id="divExample" style="width:115px;height:100px;overflow:auto;border: 2px black solid"></div>

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Sweet! Glad to help


  •  

    Posting Permissions

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