AJAX Instant Messenger Help

[jackpf]

Hi all,

I'm currently developing an ajax IM, but I'm having some difficulty forcing my div to scroll to the bottom of the conversation.

 

I'm currently using this javascript (combined with an overflow: auto on my div):

 

document.getElementById('im').scrollTop = document.getElementById('im').scrollHeight;

 

This works in all browsers except firefox. Firefox just jumps up and down the div each time it dynamically reloads it. I was just wondering if anyone had any suggestions on how to do this?

 

Thanks for any help,

Jack

[dpacmittal]

It is working in mine. I am also building a chat application. I've used the same code, it works fine in mine.

Which version of firefox are you using? I am using Firefox 3.0.1. Try to upgrade your firefox.

If its working in all other, it is definitely a problem at browser side and not with your code.

 

[jackpf]

I have the latest version of firefox...but also, other people using it have had the same problem so I don't think it's anything to do with my version.

 

How are you updating your page, if you don't mind me asking? I'm currently using setInterval('ajax_init()', 1000); and that function scrolls to the bottom of the div. This means that in firefox, every one second it jumps from the top to the bottom and back again.

 

Would you mind posting your code on how you did it please? It'd be really helpful.

 

Thanks for the reply,

Jack.

[dpacmittal]

function retrieve()
{
var xhr = new httprequest(); //to create xmlhttprequest object.
var url = "retrieve.php"; //this url displays all new messages
xhr.open("GET",url,true);
xhr.onreadystatechange = function() 
{
	if(xhr.readyState==4 && xhr.status==200)
		{
                        var prevtext=document.getElementById("chatwin").innerHTML;
                        document.getElementById("chatwin").innerHTML+=xhr.responseText;
//condition below checks if there are new messages in the chat window.
			if(document.getElementById("chatwin").innerHTML!=prevtext)
			{
				var objDiv = document.getElementById("chatwin");
				objDiv.scrollTop = objDiv.scrollHeight;
			}
		}
}
xhr.send(null);
}

 

I've used setInterval to call it every second. The if condition checks that it scrolls down only if there is new message in the chat area.

 

Try using if condition like I've used it and let me know how it goes.

[jackpf]

Ahh yeah, that's a pretty good idea.

I've just used that and it works well...however, each time the div reloads, it still scrolls back up to the top. It seems that firefox will automatically scroll to the top of a div each time it's dynamically updated.

 

It's kind of hard to explain in detail, so here's a link : http://www.jackpf.co.uk/index.php?action=im

 

You'll need an account to use it though. I can make you a test one if you don't want to fill out your details or anything.

 

But yeah, thanks for your help, I really appreciate it.

Jack.

[dpacmittal]

I just registered on your site and had a look at the function. I see what you are doing is requesting all the the conversation from the server. I think, you should only request newer conversation and add to the div. That will solve your problem. Also, it will reduce the server load as only newer message would be sent instead of whole conversation.

 

For retrieving only new messages, you'd have to make a line_no column in your database. Then use a session variable to store till what line_no has the client fetched the data and then only send those lines which has line_no>$_SESSION['lineno'].

 

Your problem of scrollbar going to top and bottom again is because of the fact that you are erasing all the messages in div and then again filling it with whole conversation every few seconds.

document.getElementById('im').innerHTML = request.responseText;

is changing the div contents all the time even if the content is same, it is removing and adding the same content every few seconds.

document.getElementById('im').innerHTML += request.responseText;

would be a better option, given that you could implement the idea I've given above.

 

If you need help with that, tell me.

 

[jackpf]

That's not a bad idea...

Pretty complex though. I just spent the last couple of hours trying to do it purely with IDs so I don't have to make a new table. Didn't really work...lol.

Thanks for your help though, I'll try and work on it.

Cheers.