How can I get the shoutbox to scroll the other way?

slikvik
53% (Neutral)
YAF Forumling Topic Starter

12 years ago

I've done the stored procedure no problem. The problem I'm having is getting the scroll bar to remember where it last was (e.g at the bottom)

I've tried all sorts of changes to div.scrollTop etc but nothing is working?

Any ideas?

bbobb
100% (Exalted)
YAF Developer

12 years ago

#2

You can do it in procedures.sql
In sp shoutbox_getmessages:
Replace ORDER BY Date DESC for ORDER BY Date
Save it and launch update.

slikvik
53% (Neutral)
YAF Forumling Topic Starter

12 years ago

#3

Hi bbobb!

Thanks for the prompt reply but as I said in my original post I've manage to do the stored procedure no problem.

My issue is with the div box scroll behaviour. Everytime you make a post the scroll bar defaults to the top. Obviously the new messages are now at the bottom :wink: so you don't see them.

I need a way for the scroll bar to be positioned at the bottom after a post.

I've seen many solutions on the net that supposedly not only handle Ajax but also Repeater objects that the Shoutbox use, such as setting the div elements scrollTop property to 0, but none seem to work!

What am I missing about the shoutbox that could be stopping this?

I've have noticed that onload it runs a JS scroll behavior method which I thought might be overriding it but I've remmed that out and it made no difference.

I've had at least 15 people on my board ask for this change as they use it like a chatroom and its scroll the opposite way to how they (and I) expect. :cheesy:

Thanks

bbobb
100% (Exalted)
YAF Developer

12 years ago

#4

I've looked into it and I'm a bit of sceptic too now.
Really, I don't have time now to investigate the complex problem.
If you come up with some solution, please let us know:)

logan
100% (Exalted)
YAF Leader

12 years ago

#5

This seems to work in all newer version browsers.

HTH

ShoutBox Reversed Scroll

1. Reverse the message list.

In Install/mssql/procedures.sql

Modify line 6992 - Removing the DESC

ORDER BY Date

2. Set the ID of the ShoutBox

In Controls/Shoutbox.ascx add the id to the div that wraps the messages approx. line48

<div id="divShoutBox" class="post" style="overflow-y:scroll;
 height: 150px; width: 100%; padding: 0; margin: 0">
       <asp:UpdatePanel ID="shoutBoxChatUpdatePanel" UpdateMode="conditional" runat="server">
	<Triggers>

3. Set the scrollbar to the bottom of box when the Timer fires.

In YAF Project find:

Classes/Utilities/JavaScriptBlocks.cs

Add the endrequest section and function

    public static string DisablePageManagerScrollJs
    {
      get
      {
        return
          @"
	var prm = Sys.WebForms.PageRequestManager.getInstance();

	prm.add_beginRequest(beginRequest);

        prm.add_endRequest(endRequest); //ADDED
    
    function beginRequest() {
		prm._scrollPosition = null;
}
    //ADDED
    function endRequest(){
    
    var div = document.getElementById('divShoutBox');
    
    if(div)
	div.scrollTop = 10000
	}//END ADD
";
      }
    }

OR this can be added as in step 5. So you don't modify the source project.

<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(endRequest);

    function endRequest() {
        var div = document.getElementById('divShoutBox');
        if (div)
            div.scrollTop = 10000
    }
</script>

4. Add pause to the Shoutbox , Hover the mouse over the chatbox message area to pause the timer.

In Controls/Shoutbox.ascx add the onmouseover and onmouseout section after the new id you gave the

<div id="divShoutBox" onmouseover="stopTimer()" onmouseout="startTimer()"  
class="post" style="overflow-y:scroll; height: 150px; width: 100%; padding: 0;margin: 0">
<asp:UpdatePanel ID="shoutBoxChatUpdatePanel" UpdateMode="conditional" runat="server">
<Triggers>

5. Add Functions for onmouseover and onmouseout

In the