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…
Okay, so we solved the WHY? Now, the how to fix it!
So, you still need to do the quicker version of the update. BUT, you somehow have to not do this if the
log file has not changed since the last check. In that manner, it will not keep drag’n you to the bottom
UNLESS there is a new entry. So, this is kind what is called “Error Checking” or “Validation”.
We would need to leave it at the faster speed, but add in a “Check-for-new-data”. Many ways jump into
my mind how to do this. I would say that this could get a bit tricky as you are using many different types
of connections. I mean, you are using several browser’s using the same file. Each browser would have
to keep a counter of some sort and know if the file has changed or not. Two ways jump into my mind of
how to handle this. Either use the size of the file or the timestamp of when the file was modified.
So, you can grab the file’s timestamp of the last time it was modified in this manner:
$file_time = date (“F d Y H:i:s.”, filemtime(“Your-filename”));
Then, just save this inside of a “HIDDEN” field. Since it is inside a hidden field, in your message display
code, you check the current value against the “HIDDEN” value. If the same, just skip reloading the file.
If they are not the same, load the file and reset the “HIDDEN” value. If you are only using JQUERY and
not PHP, you can just save this as a variable and not need to store it inside a “HIDDEN” field. Can’t see
your original posts of the code to remember which is used…
Did that make sense? So, in other words, the code will not load the file if the display is already up to date.
This will also save time on the server’s end as it will not waste time refreshing nothing new…
So, there you are, just try to get it working and if you can’t figure it out ask away…
[php]
[/php]Original code. jQuery. So somewhere else in my code, it uses this
[php]fwrite($fp, “
$file_time = date (“F d Y H:i:s.”, filemtime(“Your-filename”));
to match the time format that that the php uses? or is that like basing off of when the file was last altered, for example…like how Windows says date modified?
I have no idea how I would put the code in you gave me or what I would need to add, to be honest. I feel so bad asking a question about a language I know next to nothing about because it means more work for whomever helps me, lol… if I knew jQuery, I would just google away, since I’d know terms for it and all, but I feel like it’d take me longer to get up to speed with jQuery then I want to spend to just get a simple scroll feature working lol.
Well, that is similar to what I gave you. It does not save the same timestamp as I gave you.
But, since your code is in the #submitmsg function, this is JQuery, NOT PHP. The fwrite function
you posted places a timestamp into a DIV. But, this does not pass it on anywhere as it is inside
the browser you are viewing it with. (In other words, in your browser, not others.) So, each other
user would have a different timestamp in the displayed code. You need to know if the version of
their displayed copy of the log file is older than the current live one…
So, to do that, you need to keep your old timestamp and check it against the current file’s modified
data. This would be in your function loadlog()… You would do it as the first part of the function.
If the timestamp is the same, exit the function, if different, continue loading the log.
WAIT ! I just noticed… Your code checks for this by using the message ID. You AUTO-SCROLL the
messages outside the check for this message ID. So, just move your autoscroll line inside the brace
just above it. This will make it auto-scroll ONLY if a new message is posted.
Very sorry I did not catch that much earlier… No need for timestamps…
[php]//Id’s used to load only new messages (timewise) into the #chatbox
var prevmsgid = $("#chatbox div").last().attr(‘id’);
var newmsgid = $(html).attr(‘id’);
if(prevmsgid != newmsgid){
$("#chatbox").append(html);
document.getElementById(“beepSound”).play();
//original
var newscrollHeight = $("#chatbox").prop(“scrollHeight”) ;
$("#chatbox").animate({ scrollTop: $(’#chatbox’)[0].scrollHeight}, 1000);
}
[/php]
It works! I have to wait a tiny fraction of time before it lets me scroll up smoothly, probably j ust my computer, it needs a restart. BUT IT WORKS! WOOOOOOOOOO HOOOOOOOooo! Any optimizing you think I should do to this or is it good?
Removed 1000 delay from animate, works great now. ALL SET. Solved.
CONGRATS! Working on other’s code is sometimes harder than writing your own.
Since it is now working and your other game page is too, I would say DONE-DEAL!
I will mark this thread solved… You next issue will be a new thread! Congrats again!
THANK YOU!