Chat; scroll down new content

[jovovich]

Hi,

I have a chat script (type: shoutbox) that use ajax to get new content (messages) to a div, that works ok. However I'm looking for a way, that when a user type a message, the new message will scroll down from the top and push the other messages further down.

regards,

J

[Jesdisciple]

Do you use a textarea, iframe, or what? Better yet, can we see your code online?

[jovovich]

It's based on this script: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

When I sumbit a message, it first goes to an iframe (hidden), the script on iframe-page inserts it to mysql and call the ajax-command (e.g. javascript:ajaxpage('test.htm', 'contentarea')) that loads/update the messages on page. So the message-page is inside a Div Layer.

I have tried to use an iframe with anchors, so the iframe jumps down to the second message, and then scroll itself up to the top of the page, giving an illusion of "new message arriving at top, sliding down, and pushing the older messages under", but with it's loading and stuff, it wasn't such a good idea.

[fileserverdirect]

Try this code:

function scrollToBottomOfDiv(divName) { 
mydiv = document.getElementById(divName); 
mydiv.scrollTop = mydiv.scrollHeight; 
}

Call it after the message appeared on the screen or else it will not work.

[jovovich]

Hi,

A good example for my "wish-chat" is the Live-feed on Facebook, new message fades in from the top and push the rest downwards.

[Jesdisciple]

Is there any functionality you're asking for that is not animation? If it's just animation (the new message expanding, fading in), I think you need to look into a JS framework like JQuery.