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

General PHP Help
#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…

#21

I went to Jquery’s site. They say to change the scroll position, you need to use this:

$("#chatbox").scrollTop( $("#chatbox").height() );

Which is supposed to set the scroll position to the height of the item.
(But, that is what people said caused overshooting of the box… So, not sure!)

#22

Interestingly enough, many others say this works:

$("chatbox).scrollTop($(“chatbox”).scrollHeight);

Not sure…

#23

$(’#chatbox’).scrollTop( $(’#chatbox’).height() - $(’#chatbox’).height()); - locks me at the top, can’t scroll.

$("#chatbox").scrollTop( $("#chatbox").height() ); - locks me at the bottom, can’t scroll.

$("chatbox).scrollTop($(“chatbox”).scrollHeight); makes my page refresh everytime I press enter in chat and dreamweaver shows theres an error there but it doesn’t show an error on the page, just the refreshing issue.

For all of these options, I replaced my original 2 lines with them. example:

//Autoscroll to new bottom of #chatbox if previously at bottom of #chatbox
$("chatbox).scrollTop($(“chatbox”).scrollHeight);

#24

Well, here is another one I found. It basically scrolls down a huge amount…

$(’#chatbox’).scrollTop(1E10);

The sample used classes instead of ID’s, but, either should work… Hmmm…

#25

One last one and then I have to do some of my own work… LOL

var obj = $(’#chatbox’);
var t = obj.val();
if(obj.length){
// to put cursor at the end
obj.focus().val(obj.val());
// to scroll the textarea
obj.scrollTop(obj.height());
}

similar except it is placing the focus on the chatbox first? Hmmmm?

#26

BOTH still lock me at the bottom. OK, no problem. ENJOY working…lol.

#27

Okay, so you type something into the chatbox.
It scrolls to the bottom using most of these routines.
But, it doesn’t let you scroll the box after that?

Kinda doesn’t make sense. Unless it is that 70ms part that keeps putting you at the bottom every
70 miliseconds? Try setting that at a huge number, like 7000 and see if the scrolling works. If so,
then it is the code inside that part…

Sponsor our Newsletter | Privacy Policy | Terms of Service