how to auto scroll down in div on content added? - php

Question

I am developing a chat program using jquery, php and ajax. and my problem is that when user puts msgs and when the chat box is overflowed it should auto scroll down when new msg enter and chat box overflowed. What I tried to achieve is this.
CODE
$.ajaxSetup ({
cache: false
});
$(document).ready(function(e) {
setInterval (function() {
$('.main').load('display_messages.php');
},1000)
$(function() {
//Function for press Return button
$('#newMessageContent').keypress(function(e) {
if (event.keyCode == 13 || !event.keyCode == all ) {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
}
});
// Functions for click button
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php');
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = setInterval(function(){
$('.main').one('DOMSubtreeModified',function(){
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
})
},1000)
$('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
});
});
});
it has some bugs. it will auto scroll down but it repeat itself again and again and not stoping, and you cant scroll up to see older msgs if u want.
so then I used this function $('.main').on('scroll',function(){
if ( $('.main').scrollTop() === 0 ){
clearInterval(chckIt);
}
}); to control it but its useless.
here is html.
code
<div class="chatBox">
<div class="chatlogo">
<embed src="test2.swf" play="true" class="vid2" loop="true" width="180" height="50" salign="C" scale="ShowAll" id="vid_2" quality="High" wmode="transparent" name="vid_2" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
</div>
<div class="user">
<form name="signIn" id="signInForm" action="signout_delete_content.php" method="post" onSubmit="return false">
<span class="error animated">Invalid uername</span>
<input name="username" type="text" id="username" placeholder="Enter username" size="13px" onClick='document.username.value = "" '>
<input type="submit" id="signIn" value="SING IN">
</form>
<span class="welcome"></span>
<input type="button" id="signOut" value="SIGN OUT" onclick="window.location.reload();">
</div>
<div class="main">
<p>Admistrator: Hello msgs here.</p>
</div>
<div class="messageBox">
<form name="messageBoxSignInForm" id="messageBoxSignInForm" onSubmit="return false">
<input type="submit" id="messageBoxSignIn" value="Sign In to Enter Chat">
</form>
<form name="newMessage" class="newMessage" action="" onSubmit="return false">
<textarea name="newMessageContent" id="newMessageContent" placeholder="Enter your message here.">Enter your message here</textarea>
<input type="submit" id="newMessageSend" value="Send">
</form>
</div>
</div>
any help would be appreciated. thanks

Answer 1

You can't scroll up because you keep triggering load('display_message.php'), which will trigger 'DOMSubtreeModified' event. So, you can't rely on 'DOMSubtreeModified' and have to check for a new message by other means. For example, you may count the number of messages for each 'display_message.php' and check for difference.
var old = 0, new = 0;
$('#newMessageSend').click(function() {
setTimeout (function() {
$('.main').load('display_messages.php', chckIt);
setTimeout (function() {
$('.main p:last').addClass('animated fadeIn');
},20)
},50);
//$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
});
var chckIt = function(){
new = $('.main').children().length;
if (new > old)
{
old = new;
setTimeout(function() {
$('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);
},500);
}
};

Answer 2

You were right,my previous answer doesn't works..
$('.messageBox').scrollTop($('.messageBox')[0].scrollHeight)
this works well:
jsfiddle:
http://jsfiddle.net/Lh4TN/6/