Resolved Scroll Bar Bottom Problem

ubh · 03-23-2009, 01:17 AM

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!

TinyScript · 03-23-2009, 01:32 AM

Try this page
http://radio.javaranch.com/pascarell...573598403.html

ubh · 03-23-2009, 01:44 AM

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.

TinyScript · 03-23-2009, 01:58 AM

Look on this page. It does exactly what you want. It's the link from this page
http://radio.javaranch.com/pascarell...837038219.html

ubh · 03-23-2009, 02:07 AM

Very good, I over looked that link! Working perfect now.

TinyScript · 03-23-2009, 02:11 AM

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>

TinyScript · 03-23-2009, 02:12 AM

Sweet! Glad to help