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