Why wont this shout box slider work properly? - php

Question

I added this shout box from http://www.saaraan.com/2013/04/creating-shout-box-facebook-style
a live demo of it can be seen here http://www.saaraan.com/2013/04/creating-shout-box-facebook-style
I have everything working properly except the slider itself. Every time I try to scroll up, it automatically scrolls back down. It wont stay in the up position. I think the problem is here.
// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
window.setInterval(function(){
$.post('shout.php', load_data, function(data) {
$('.message_box').html(data);
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
});
}, 1000);
//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
if(evt.which == 13) {
var iusername = $('#shout_username').val();
var imessage = $('#shout_message').val();
post_data = {'username':iusername, 'message':imessage};
//send data to "shout.php" using jQuery $.post()
$.post('shout.php', post_data, function(data) {
//append data into messagebox with jQuery fade effect!
$(data).hide().appendTo('.message_box').fadeIn();
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
//reset value of message box
$('#shout_message').val('');
More specifically here
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
and here
//keep scrolled to bottom of chat!
var scrolltoh = $('.message_box')[0].scrollHeight;
$('.message_box').scrollTop(scrolltoh);
I have changed the 0 to 1 and other numbers and it fixes the scroll to work right but it doesn't show the latest shout, it will show shout 25 which is the last shout to be seen before deletion. Im not sure if this makes any sense but any help would be great.
The first link from top shows the whole code, the second link shows the example

Answer 1

Try this code, I didn't tested it. I hope it will work.
window.setInterval(function() {
$.post( 'shout.php', load_data, function( data ) {
var old_data = $(".message_box").html();
if ( old_data != data ) {
$(".message_box").html( data );
// get scrollHeight
var scrollHeight = $(".message_box").get(0).scrollHeight,
// get current scroll position
scrollTop = $(".message_box").scrollTop(),
// calculate current scroll percentage
percentage = Math.round( ( 100 / scrollHeight ) * scrollTop );;
// make sure user is not scrolled to top
if ( percentage > 80 ) {
$(".message_box").scrollTop( scrollTop );
}
}
});
}, 1000);