Why wont this shout box slider work properly?

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

Answers


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);

Need Your Help

Sublime Text 3 API : Get all text from a file

python select text sublimetext3 sublime-text-plugin

I am trying to create a plugin for sublime text 3. For now I only get possible to select all text in a window and copy it in another window. Code : import sublime, sublime_plugin class

List View with adapter android

android android-layout android-intent android-widget

I would like to display a list view using an adapter. My problem is that items are not displayed directly one after the other but one per page ( there is a space between each two items).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.