keeping scrolling area at the bottom

asked 2010-12-02 19:31:56 +0800

I have a 'center' panel as follows:

<center autoscroll="true">
  <vlayout id="chatContent"/>
</center>

As new messages come in, I append them to chatContent. This works fine, but at some point enough messages come in that the scroll bars are enabled. New messages continue to be added at the bottom, and go off the bottom of the center panel. I can, of course, scroll them back into view.

What I'd like to be able to do is have the scroll bar reset to as low as possible whenever a new message comes in. This will keep new messages at the bottom of the chat visible, but provide the user the option to scroll up to view past messages.

Is this possible? Is there some flag, or do I need some javascript magic?

Thanks,

Matthew

delete flag offensive retag edit

11 Replies

Sort by » oldest newest

12next page »

answered 2010-12-03 13:55:51 +0800

drdozer
132

I'm still stuck on this. I can't find any hook in zk that lets me adjust the scroll bar to the bottom.

link publish delete flag offensive edit

answered 2010-12-03 14:44:52 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

Push!

i need the same for my messaging system.

link publish delete flag offensive edit

answered 2010-12-05 12:21:18 +0800

drdozer
132

OK, perhaps there is nothing in zk. Is there a javascript way to do it?

link publish delete flag offensive edit

answered 2010-12-05 19:27:18 +0800

samchuang
4084 ● 4

updated 2010-12-05 19:28:01 +0800

Have you tried Clients.scrollIntoView()

link publish delete flag offensive edit

answered 2010-12-06 07:16:43 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

Hi samchuang,

we talk about new written lines to a textbox where the multiline textbox shows the old content and new lines where added like a normal chat application or skype or whatever.So we serach not scrollIntoView for component instead we search scrollIntoView for the last appended text-line to a textbox.

link publish delete flag offensive edit

answered 2010-12-07 06:45:39 +0800

drdozer
132

Thanks samchuang. Clients.scrollIntoView() worked for me. For others, here is my setup:

<borderlayout>
  <center autoscroll="true">
    <vlayout id="chatContent" />
  </center>
  <south height="30%" autoscroll="true">
    <vbox>
      <div align="left">
        <textbox id="chatTextbox" rows="1" width="95%" />
      </div>
      <div align="right">
        <button id="chatSendButton">send</button>
      </div>
    </vbox>
  </south>
</borderlayout>

Then, in the 'recieve message' handler I do the following:

case ReceiveMessage(from, msg) =>
  val fromLab = new Label(from)
  fromLab.setSclass("userName")

  val msgLab = new Label(msg)
  msgLab.setSclass("message")

  val msgRow = new Div_Impl
  msgRow.appendChild(fromLab)
  msgRow.appendChild(msgLab)

  withActiveDesktop {
    chatContent.appendChild(msgRow)
    Clients.scrollIntoView(msgRow)
  }

The withActiveDesktop block just handles the desktop activation and deactivation, as chat messages are being fired in all different threads. The new message is now always visible, and the scroll bar on the center element adjusts accordingly.

Thanks samchuang for the help.

Matthew

link publish delete flag offensive edit

answered 2010-12-07 08:28:49 +0800

terrytornado

9393 ● 3 ● 7 ● 16
http://www.oxitec.de/

updated 2010-12-07 08:29:44 +0800

That's a good idea. I'm fixed in mind to a multiline textbox. You take for each message an own label in a div, while scrollIntoView works for components.

Thanks both