Auto Scroll Down When New Row Added

yarub · October 3, 2008

So I'm just getting into AJAX so it's all Greek to me. I've been playing around with making a chat script. I've got it to the point where it's adding the entry in and displaying it right away. So that works! However, when the lines get to the bottom of my chat window, it doesn't scroll with it.

So I added this into it..

/* Auto scroll to bottom */
var objDiv = document.getElementById("chatwindow");
objDiv.scrollTop = objDiv.scrollHeight;

But that only works when the page itself is refreshed. What can I add in to make it automatically scroll down with each new row added?

Thanks!

F1Fan · October 3, 2008

It would help to see more of your code. It sounds like your JS code to scroll the page down is working, but it's not being called until the page is reloaded. I suggest calling this code with your JS function, but again, it will help to see more.

yarub · October 3, 2008

<html>
<head>
<title>tripChat</title>
<style type="text/css">
input, textarea {
  font-family:tahoma;
  color:#000;
  background:#FFF;
  font-size: 14px;
}
#chatwindow {
  border:1px solid #aaaaaa;   padding:4px;  background:#232D2F;  color:white;
  width:760px;  height:400px;  overflow: auto;  font-family:tahoma;
}
</style>
</head>
<body>


	<div id="content">
		<p id="chatwindow"> </p>		
<!--			<textarea id="chatwindow" rows="19" cols="95" readonly></textarea><br>
-->
		<input id="chatnick" type="text" size="9" maxlength="9" > 
		<input id="chatmsg" type="text" size="60" maxlength="80"  onkeyup="keyup(event.keyCode);"> 
		<input type="button" value=" Send " onclick="submit_msg();" style="cursor:pointer;border:1px solid gray;"><br><br>
		<br>
	</div>

</body>
</html>

<script type="text/javascript">

/* Settings you might want to define */
var waittime=800;		

/* Internal Variables & Stuff */
chatmsg.focus()
document.getElementById("chatwindow").innerHTML = "loading...";

var xmlhttp = false;
var xmlhttp2 = false;


/* Request for Reading the Chat Content */
function ajax_read(url) {
if(window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	if(xmlhttp.overrideMimeType){
		xmlhttp.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}

if(!xmlhttp) {
	alert('Giving up  Cannot create an XMLHTTP instance');
	return false;
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4) {
	document.getElementById("chatwindow").innerHTML = xmlhttp.responseText;

	zeit = new Date(); 
	ms = (zeit.getHours() * 24 * 60 * 1000) + (zeit.getMinutes() * 60 * 1000) + (zeit.getSeconds() * 1000) + zeit.getMilliseconds(); 
	intUpdate = setTimeout("ajax_read('chat.txt?x=" + ms + "')", waittime)
	}
}

xmlhttp.open('GET',url,true);
xmlhttp.send(null);
}

/* Request for Writing the Message */
function ajax_write(url){
if(window.XMLHttpRequest){
	xmlhttp2=new XMLHttpRequest();
	if(xmlhttp2.overrideMimeType){
		xmlhttp2.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}

if(!xmlhttp2) {
	alert('Giving up  Cannot create an XMLHTTP instance');
	return false;
}

xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
}

/* Submit the Message */
function submit_msg(){
nick = document.getElementById("chatnick").value;
msg = document.getElementById("chatmsg").value;

if (nick == "") { 
	check = prompt("please enter username:"); 
	if (check === null) return 0; 
	if (check == "") check = "anonymous"; 
	document.getElementById("chatnick").value = check;
	nick = check;
} 

document.getElementById("chatmsg").value = "";
ajax_write("w.php?m=" + msg + "&n=" + nick);
}

/* Check if Enter is pressed */
function keyup(arg1) { 
if (arg1 == 13) submit_msg(); 
}

/* Start the Requests!  */
var intUpdate = setTimeout("ajax_read('chat.txt')", waittime);


/* Auto scroll to bottom */
var objDiv = document.getElementById("chatwindow");
objDiv.scrollTop = objDiv.scrollHeight;

</script>

The majority of that is from a tutorial. I added in the bottom few lines.

F1Fan · October 3, 2008

OK, you need to move your

/* Auto scroll to bottom */
var objDiv = document.getElementById("chatwindow");
objDiv.scrollTop = objDiv.scrollHeight;

code to the bottom of the AJAX function, which I think is the ajax_write() function, like this:

/* Request for Writing the Message */
function ajax_write(url){
if(window.XMLHttpRequest){
	xmlhttp2=new XMLHttpRequest();
	if(xmlhttp2.overrideMimeType){
		xmlhttp2.overrideMimeType('text/xml');
	}
} else if(window.ActiveXObject){
	try{
		xmlhttp2=new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
		try{
			xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
		} catch(e){
		}
	}
}

if(!xmlhttp2) {
	alert('Giving up  Cannot create an XMLHTTP instance');
	return false;
}

xmlhttp2.open('GET',url,true);
xmlhttp2.send(null);
/* Auto scroll to bottom */
var objDiv = document.getElementById("chatwindow");
objDiv.scrollTop = objDiv.scrollHeight;
}

Try that.

yarub · October 4, 2008

It's working sort of. It's only scrolling to the second-to-last line though, not the most recent row. Here's a working example of it...

http://area51.tripoutloud.com/chat/

F1Fan · October 4, 2008

Hmm... maybe add a function that does it, then call it delayed slightly using setTimeout().

JasonLewis · October 4, 2008

Shouldn't you call it after the new text has been added, so when the readyState == 4?

yarub · October 5, 2008

That fixed that part! Thank you.

One last thing. Now that it auto scrolls for me.. it doesn't let me scroll up without a fuss. It scrolls up for half a second and then pulls it back down. Any way to fix that easily?

F1Fan · October 6, 2008

I would suggest adding a global variable in your JS that is set to true. In your auto-scrolling function, make it only auto-scroll if that var is true. Then, add an onfocus event to your div that sets the var to false. Finally, add an onblur event to the div that resets it to true.

This way, if the user clicks in the div (either to scroll up, to select text, or whatever) it will stop auto-scrolling. But, as soon as they click anywhere else, it will turn auto scrolling back on.

bustherh · March 1, 2009

I know this is an old post but I am having the same issue and I am not very good at php or javascript.

can someone please explain to me how to make it stop auto scrolling when you click in the chat window or on the scrollbar?

Aled Owen · November 16, 2009

Sorry for the bump but I'm really needing help with this.

Cheers.

Sign In

Auto Scroll Down When New Row Added

Recommended Posts

yarub

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

yarub

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

yarub

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

JasonLewis

Link to comment

Share on other sites

yarub

Link to comment

Share on other sites

F1Fan

Link to comment

Share on other sites

bustherh

Link to comment

Share on other sites

Aled Owen

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information