Scrollbar auto scroll

[Martin C++]

Hello,

I have a div that contains small posts, it grows automatically. When size is too big then the scrollbar apepars with CSS overflow property. What I want is that when more data is added then the div is automaticall scrolled down to it BUT when user decides to scroll up the the focusing is ignored. So the bottom line is that focus should only be triggered when the box is scoller completly down (scrollbar is at the bottom) and not in any other occasions. How can I do this, I bet it's really simple for someone who uses jquery or js on a daily basis.

[LastMitch]

So the bottom line is that focus should only be triggered when the box is scoller completly down (scrollbar is at the bottom) and not in any other occasions. How can I do this, I bet it's really simple for someone who uses jquery or js on a daily basis.

Are you using this:

http://baijs.nl/tinyscrollbar/

or something else.

Can you post a small code snippet with jQuery code and div.

[Martin C++]

My js:

document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;

It focuses to the end of content but when user scrolls up it instantly focuses down again, therefor preventing user from seeing older content.

And div is ofc <div id="chat-area" style="overflow-y:scroll"></div>

EDIT: I am not using anything nor do I want to, because I dont want a long code. It can probably be handled with just few lines of jquey

[LastMitch]

Are you using this:

https://github.com/KoushikDasika/PHP-Chat-Room/blob/master/chatroom.js~

Cause that 1 line looks familiar because I used this chat room before.

You are not being very specific whether this chatroom (javascript code) you are working on appear on mobile devices or a laptop or a desktop?

They should look the same base on how you adjusted it but I don't know.

EDIT: I am not using anything nor do I want to, because I dont want a long code. It can probably be handled with just few lines of jquey

How did you came up with that conclusion?

You can used this:

http://jquerybyexample.blogspot.com/2010/09/how-to-scroll-to-bottom-of-textarea.html

[Martin C++]

Are you using this:

https://github.com/KoushikDasika/PHP-Chat-Room/blob/master/chatroom.js~

Yes, I use this as a base, but I have modified it pretty much. The chatroom should only work on laptops and desktops. And the scrolling js line is actaully from there. It scroll to bottom just fine, but user cant see older text, cause it keeps scrolling down.

How did you came up with that conclusion?

I am just assuming, I dont know anything for sure. I am not very experienced with javascript.

You can used this:

http://jquerybyexample.blogspot.com/2010/09/how-to-scroll-to-bottom-of-textarea.html

It does exactly the same thing that the code I posted before, only difference is that it's done with jQuery. As soon as new line comes it scrolls to bottom. I dont want this to happen when user has manually scrolled up before.

Can I check if the scrollbar is at the bottom of the div ? Cause then I could make if statement which prevents the scrolling when the scrollbar is not at the bottom.

EDIT: I will give an example, so you know what I mean. I need the scrollbar to something like in facebook. You know, when someone writes to you then the focus is automatically on new line, but not when you are scrolled up to see older chat.

[LastMitch]

I need the scrollbar to something like in facebook. You know, when someone writes to you then the focus is automatically on new line, but not when you are scrolled up to see older chat.

Can you post an image of that. You know the those messages are store in the text file.

I don't understand your question. You are asking for feature not part of the code. When you ajax the txt file it will appear on to the div tags. It will show the all messages.

Try this:

http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

[Martin C++]

Your not geting my point and picture wont help you understand it. I already have working scrollbar, yes. And like you said, I am looking to add a feature to it. If, scrollbar not at the bottom DONT scroll text down, If is, then scroll. The messages are stored in database. When one of the users in the room says something then a new row is added in database and then retrived by the chatroom and appended in the div causing the div to expand. Since I have fixed height and overflow-y: scroll, I can scroll the div and see the data inside it. This code: document.getElementById('chat-area').scrollTop = document.getElementById('chat-area').scrollHeight;

lets me scroll the div to the bottom so the user can immediatly see the new message. Without that code the user would have to scroll manually to the bottom, every time someone posts. THats all good, I want all of that, but I dont want it to happen when I have scrolled my text up. Have ou ever used facebook for chating ? I dont want a fancy scrollbar or something. I just need mys scrollbar to act like the one in facebook and in any decent chating app like MSN, Ebuddy etc.