Scroll is locked at bottom but does automatically go to the bottom.. jquery chat

General PHP Help
#1

So I made a chat application from an online tutorial, and then autoscroll didn’t work at all when new messages came in. I went to a forum to get help about it, and now it autoscrolls to the bottom, but 2 weeks after the fact, now, I realized you can’t scroll up. I AM NEW to jQuery so technicalities will not work out well for me, to be honest. Code or walkthroughs are best, as I can play with the code and learn. I just wanted this chat application to work on my site, simple and all.

WHAT I WOULD LIKE IS: autoscroll to bottom when a new message comes in past limit, but for it not to get stuck. If you need other parts of code, let me know, but this is all the jquery to do with messages, refreshing, and scrolling.

[php]

[/php]
#2

Hmmmm, MiniC… Aren’t you doing that backwards? I mean, shouldn’t new entries be at the top with the older ones below it? BUT, here is a sample of how you scroll a DIV to the bottom…

window.setInterval(function() {
var elem = document.getElementById(‘data’);
elem.scrollTop = elem.scrollHeight;
}, 5000);

This one uses an ID of “data” and it does it at set intervals, but… Just alter as needed…

#3

OK so where do I put that and what do I remove? LOL I am lost in jQuery and am not ready to delve into it yet really.

#4

Well, it appears that your code loads the chat log every 70ms. (70 miliseconds or 70/1000th of a second.)

In that code section, is this line:
$("#chatbox").animate({ scrollTop: newscrollHeight }, ‘normal’);
It tells the routine to animate the “chatbox” ID to scroll to the bottom…

So, actually, your code should do it as is. I researched this a bit and found many ways to do it…
If you want to use the ANIMATE version as your code already has used, you can replace that line
with this and it should work:
$("#chatbox").animate({ scrollTop: $(’#chatbox’)[0].scrollHeight}, 1000);

A minor difference… Now, it appears that this depends on the version of JQuery you are using!
Some other code is available for version 1.6 as that version seems to need different commands.
Try this version and let us know…

#5

Ok well I changed it to that line of code and it still does autoscroll to the bottom of the chat when a new message is made but it also is still locked and doesn’t let me scroll up to see older things. Do I need to change jquery? I will need to google that one.

#6

Well, the problem is the automated way you move down. You have told it to do so every 70ms.
So, that is a short period of time and will move it down all the time.

So, you need to alter the code to not do it every so many miliseconds.

You should have it only do it if there is new chat info to display, not every so many MS’.
Actually, the code should really check for updates every 70ms or longer maybe.
On checking for new info, it should then display the new info if there, if not do nothing.
If it does find new info, it adds the info and moves to the bottom. the user can still scroll back if wanted.

the problem is auto-scrolling down every set miliseconds…

gotta head out for many hours, so may not be able to respond for awhile…

#7

Ok, that code is supposed to be for reloading the log when people send messages. I can’t make it any slower because it already feels very slow when sending messages fast. I have no idea how I’d change it to do that without just making it slow, which I can’t do. Sadly, I don’t know jquery. I got this off a tutorial. I know the other big web languages a decent amount but jquery is ENTIRELY new to me. I just want this up and running.

Ok, talk to you then.

#8

I’m back for an hour… Or less…

Okay, the way that I understand, when you type in a message it updates the screen to show you all
of the other messages. If you just sit there, it updates the messages every 70ms. It only give you
70ms to scroll back. That is not long enough. While scrolling up it hits the 70ms and scrolls you down.

Well, where do these messages come from? A database? So, perhaps you need to check the last
message displayed and if there are others, then refresh the screen. If no new messages, then just
sit there. then, the user can scroll. Not sure why you need to refresh the chatbox every 70ms…

Perhaps I do not understand the reason for that code…

#9

The messages come from a “log.html”
It refreshes simply because that’s the way the jquery tutorial had it done, and since I don’t know jquery, I just went with it… I don’t know if it locked at the bottom before I got help from someone or not, I don’t remember.

#10

So, somewhere in your code, the log.html gets created or appended to as entries are given.
Then, in your code, it simply adds that page to your display. So, if that page is stored inside a
“scrollable” DIV, it should be scrollable by the user. Then, you can use JQuery inside the load
routine to make it scroll to the bottom of the DIV. This should work in theory with little JQuery code.

So, the code looks like it should work. Is this for your home network, too? Is the code refreshing
the chat log timely? I mean is it working all except locking at the bottom? Will it let you start to do
a scroll and then jumps back? If so, I think it is designed to keep at the bottom. So, you always see
the last things typed. In that case, you would have to make some other sort of code flag that disables
the update during scrolling. That would be tricky. In the tutorial where you got this code from, was
there any discussion on this issue? Perhaps the author has a fix for it?

Sorry I am not helping much…

#11

Yes, home network. Yes, it jumps back mid scroll. No discussion on the issue, and tried finding a way to contact author and nothing. I do have a long log that family specifically can click to go to if they missed something because of a refresh or not being able to scroll. It’s not a huge issue, so if it’d be complicated, I can just leave it for now, I guess.

#12

Well, the problem must be in this section:

//Autoscroll to new bottom of #chatbox if previously at bottom of #chatbox
var newscrollHeight = $("#chatbox").prop(“scrollHeight”) ;
$("#chatbox").animate({ scrollTop: newscrollHeight }, ‘normal’);

That code seems to be setting it to the OLD scroll height, not the new version.
So, try this version instead:

// Autoscroll to new bottom of #chatbox
$("#chatbox").animate({ scrollTop: $(’#chatbox’)[0].scrollHeight}, 1000);

That tells it to scroll to the height of the box which means that it should go to the bottom.
The ,1000 argument just tells the .animate routine to do so in that length of time. Let us know…

#13

I tried that. It has the same effect as the previous code.

#14

Interesting… Seems a lot of people have that same issue. I did find that it works on some
browsers and not others. They mentioned problems with Chrome a lot…

Anyways, they said to try this version:
var elem = $(’#chatbox’);
elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight();

Something to do with overshooting the bottom of the element. This adjusts for overshooting…

#15 
			//Autoscroll to new bottom of #chatbox if previously at bottom of #chatbox
			var elem = $('#chatbox');
                            elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight();
			//var newscrollHeight = $("#chatbox").prop("scrollHeight") ;
		//$("#chatbox").animate({ scrollTop: $('#chatbox')[0].scrollHeight}, 1000);

Ok so like this? I commented out my original lines… it lets me scroll now but no auto scroll to bottom.

#16

Well, not sure if you can comment out JS that way. Try removing the lines…

#17

Same thing either way.

#18

Which browser are you using? Did you try another browser? I am reading a lot more on this now…

#19

Chrome, I tried ff and ie also.

#20

Wow, seems like a LOT of people having this issue. And a lot of ideas on how to do it correctly.
Nobody seems to have the same exact versions…

Try this version:

$(’#chatbox’).scrollTop( $(’#chatbox’).height() - $(’#chatbox’).height());

Kinda grasping at straws here…

Sponsor our Newsletter | Privacy Policy | Terms of Service