I want div containing a chat, similar to facebook. If the text content gets longer, ther is y-scroll, but:

1. The focus shall be on the newest chat entry
2. A very long word should do a line break

js fiddel code

CSS

.chat{
width: 230px;
    height: 310px;

margin-left: 10px;
background-color: grey;
    border: solid 1px black;

overflow-y:scroll;
}

I want div containing a chat, similar to facebook. If the text content gets longer, ther is y-scroll, but:

1. The focus shall be on the newest chat entry
2. A very long word should do a line break

js fiddel code

CSS

.chat{
width: 230px;
    height: 310px;

margin-left: 10px;
background-color: grey;
    border: solid 1px black;

overflow-y:scroll;
}

• javascript
• html
• css

Share Improve this question Follow asked May 31, 2013 at 15:44 kaputukaputu 14122 gold badges44 silver badges1010 bronze badges 1

• 2 word-wrap: break-word;; for the second you need javascript – bwoebi Commented May 31, 2013 at 15:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to scroll to the bottom when a new message es in and you have to use JavaScript to do it (there might be a clever CSS way I don't know, though).

If you're using jQuery (and I'd remend you do), you can do it something like this:

// when a new message es in...
var $chat = $(".chat");
$chat.scrollTop($chat.height());

You might want to change the selector from $(".chat") -- that will probably scroll all chats, which you wouldn't want.

You can also do it with vanilla JavaScript:

// when a new message es in...
var chatEl = document.getElementById("#mychatelement");
chatEl.scrollTop = chatEl.scrollHeight;

For a scrolling part refer to jQuery Scroll to bottom of page/iframe

As for line brakes - it should be like this automatically.