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.
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…
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.
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…
I tried that. It has the same effect as the previous code.
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…
//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.
Well, not sure if you can comment out JS that way. Try removing the lines…
Same thing either way.
Which browser are you using? Did you try another browser? I am reading a lot more on this now…
Chrome, I tried ff and ie also.
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…
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!)
Interestingly enough, many others say this works:
$("chatbox).scrollTop($(“chatbox”).scrollHeight);
Not sure…
$(’#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);
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…
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?
BOTH still lock me at the bottom. OK, no problem. ENJOY working…lol.
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…
I have tried setting it to 7000 just now. It lets me scroll and pushes me down after the 7000 time interval. Yes, that makes sense. The issue though is that it makes it so slow to enter messages. Delay when sending one, delay when trying to do another after. It makes sense why it does, 7 seconds to refresh log.
I have NO idea how I would do code to incorporate scrolling and reloading and all. I get why it does this though…