Ajax Jquery Chat

[MDCode]

Ok so I'm new to ajax/jquery and am making a basic chat thingy . Yea. So I want it to scroll down to the last message in the div, which works, but a user can not scroll up the way I'm using it because of the interval refresh at the moment.

 

<script>
var load = setInterval(
function()
{
$('#chat_container').load('fetchchat.php');

var objDiv = document.getElementById("chat_container");
objDiv.scrollTop = objDiv.scrollHeight;

}, 1000);
</script>

 

Any idea where I could move it that would not affect the user's scrolling?

Edited November 14, 2012 by SocialCloud

[codefossa]

You could only append new messages rather than replacing the html with them all. This would also allow you to query less. Just store the id of the latest message in JS and pass it when you get your messages.

[MDCode]

I tried your suggestion...and failed epically. But! I google'd my hands to numbness and found a solution. If anyone is interested, here it is

 

<script>
var isScrolling = false;
var load = null;
$(function() {

$('#chat_container').on('scroll', function() {
isScrolling = true;
if (load != null) {
clearInterval(load);
load = null;
}
});

var pollScrolling = setInterval(function() {
isScrolling = false;

if (load == null) {
load = setInterval(refreshContent, 5000);
}
}, 500);

load = setInterval(refreshContent, 300);

function refreshContent() {
if (!isScrolling) {

$('#chat_container').load('fetchchat.php');
var objDiv = document.getElementById("chat_container");
objDiv.scrollTop = objDiv.scrollHeight;
}
}

});
</script>

 

Just checking if the user is scrolling, if they stop scrolling for 5 seconds, send them back to the bottom.

Edited November 14, 2012 by SocialCloud