how to implement a scrollbar

Question

I'm new to jquery and javascript and have no idea how to solve this problem: I have a simply jquery chat and there is a div with the id 'show_messages' in which I load all the messages from my ajax request. All works fine, the only problem ist, that the div for show messages gets longer and longer and I have absolutely no idea how to implement a scrollbar. I tried to use the jquery scroll function, but I hasn't worked and I don't know how to use it right. How can I make a simple scrollbar like in the facebook messenger or in similar messengers.

My Code:

<div id="message_dialog" class="message_box">
  <div id="show_messages"></div>
  <div id="feedback"></div>
  <form action="#" method="post" id="message_form">
  <label>Say something:</label>
  <textarea id="message"></textarea>                                  
  <input type="submit" id="send_message" value="Send Message">
  </form>
</div>
...


    $(document).ready(function(){
      $('#start_conversation').click(function() {    
        $('#message_dialog').dialog();   
          var interval = setInterval(function() { 

        $.ajax({
            type : "POST",
            url: 'get_messages.php',
            success: function(data) {
                $('#show_messages').html(data); 
            }
        });
    }, 1000);
    return false;
  });
});

$('#message_form').submit(function() {
        var username = ...
    var message = ...

    $.ajax({
        type : "POST",
        url: 'send_message.php',
        data: { 'username' : username, 'message' : message }, 
        success: function(data) {
            $('#feedback').html(data);

                $('#feedback').fadeIn('slow', function() {
                    $('#feedback').fadeOut(6000);
                });             
            $('#message').val('');          
        }
    });
    return false;
});

nubinub · Accepted Answer · 2013-07-18 14:04:08Z

2

Setting a max-height property and overflow-y to auto doesn't solve the problem ?

#show_messages{
max-height:200px;
overflow-y:auto;
}

Let's say for example that a message is displayed within his proper div, you can scroll to the last message by using this function.

$("#show_messages").scrollTop($("#show_messages").children('div').last().offset().top);

edited Jul 18, 2013 at 14:04

answered Jul 18, 2013 at 12:31

nubinub

1,9382 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Clint Easthood Over a year ago

Yeah thats what I meant, I'm new to css as well. But how can I scroll automatically to the newest message?

nubinub Over a year ago

api.jquery.com/offset and api.jquery.com/scrollTop Here are the two functions you should use in order to achieve what you are expecting, depending on how you want this to be implemented , i think that you should use scrollTop with the coordinates of the last added message which you can obtain using offset function.

nubinub Over a year ago

I have edited my post with an example of how to scroll to the last div inside the "#show_messages".

Clint Easthood Over a year ago

If I use $("#show_messages").scrollTop($("#show_messages").children('div').last().offset().top); it scrolls down and up again everytime when it's refresh with ajax.

nubinub Over a year ago

Indeed you have to call the srolling function every time you make an ajax call.

|

Hakan KOSE · Accepted Answer · 2013-07-18 12:27:33Z

-1

I suggest to use AlternateScroll jquery plugin: http://www.dynamicdrive.com/dynamicindex11/facescroll/

It's very useful and you can easily customize it. Hope this helps.

answered Jul 18, 2013 at 12:27

Hakan KOSE

7719 silver badges16 bronze badges

Collectives™ on Stack Overflow

how to implement a scrollbar

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related