YAF.NET Support Forum

Welcome Guest! To enable all features please Login or Register.
How can I get the shoutbox to scroll the other way?
Options
View
Go to last post Go to first unread
Previous Topic Next Topic
Offline slikvik  
#1 Posted : 14 June 2010 17:26:43(UTC)
slikvik


Rank: YAF Forumling

Reputation:

Joined: 14/06/2010(UTC)
Posts: 5

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
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?
Back to top
Sponsor
Back to top  

Wanna join the discussion?! Login to your YAF.NET Support Forum forum account, or Register a new forum account.
Back to top  
Offline bbobb  
#2 Posted : 15 June 2010 17:59:10(UTC)
bbobb


Rank: YAF Developer

Reputation:

Medals: Medal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.Medal of Honor for a YAF Database Key Player: Holds the key to YAF database. Bow down!Medal of Honor for the Support King: Given for answering tons of support questions and generally helping the community.Medal of Honor for the Support Knight: Given to a community member who has answered lots of support questions.

Joined: 21/10/2008(UTC)
Posts: 1,558
Man
Russian Federation
Location: Moscow

Thanks: 51 times
Was thanked: 287 time(s) in 253 post(s)
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.

MySQLPostgreFirebird for YAF
UserPostedImage
Back to top
Offline slikvik  
#3 Posted : 15 June 2010 20:06:30(UTC)
slikvik


Rank: YAF Forumling

Reputation:

Joined: 14/06/2010(UTC)
Posts: 5

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
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
Back to top
Offline bbobb  
#4 Posted : 16 June 2010 10:04:32(UTC)
bbobb


Rank: YAF Developer

Reputation:

Medals: Medal of Honor Key: Given to pillars of the community who are key players in the YAF community and project.Medal of Honor for a YAF Database Key Player: Holds the key to YAF database. Bow down!Medal of Honor for the Support King: Given for answering tons of support questions and generally helping the community.Medal of Honor for the Support Knight: Given to a community member who has answered lots of support questions.

Joined: 21/10/2008(UTC)
Posts: 1,558
Man
Russian Federation
Location: Moscow

Thanks: 51 times
Was thanked: 287 time(s) in 253 post(s)
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:)
MySQLPostgreFirebird for YAF
UserPostedImage
Back to top
Offline logan  
#5 Posted : 17 June 2010 01:50:37(UTC)
logan


Rank: YAF Leader

Reputation:

Medals: Medal of Honor for the Support Knight: Given to a community member who has answered lots of support questions.

Joined: 15/03/2008(UTC)
Posts: 311

Thanks: 13 times
Was thanked: 62 time(s) in 56 post(s)
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

Code:
ORDER BY Date


2. Set the ID of the ShoutBox <div>

In Controls/Shoutbox.ascx add the id to the div that wraps the messages approx. line48
Code:
<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


Code:
    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.
Code:
<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>

Code:
<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 <script section at the top of Shoutbox.ascx add the 2 functions

Code:
function startTimer() {
    var timer = $find("<%=shoutBoxRefreshTimer.ClientID%>")
    if(timer)
    timer._startTimer();
}
function stopTimer() {
    var timer = $find("<%=shoutBoxRefreshTimer.ClientID%>")
    if(timer)
    timer._stopTimer();
}
</script>


6. Set Scrollbar to bottom on pageload.

In Default.aspx add the onload to body tag and <script> section below the other <script block at top.

Code:
<script type="text/javascript">
    function setChatScroll(){
    var div = document.getElementById('divShoutBox');
    if (div)
        div.scrollTop = 10000
}
</script>


Code:
<body style="margin:0; padding:5px" onload="setChatScroll()">



Rebuild the YAF Project to update the YAF.dll.
Update all files changed on Host and rerun install to update the SP.
Should be good to go.[wink]

[biggrin] I like it this way [thumbup]

Edited by user 22 June 2010 00:45:35(UTC)  | Reason: fix errors added no source function

test
Back to top
thanks 1 user thanked logan for this useful post.
slikvik on 22/06/2010(UTC)
Offline slikvik  
#6 Posted : 21 June 2010 11:51:23(UTC)
slikvik


Rank: YAF Forumling

Reputation:

Joined: 14/06/2010(UTC)
Posts: 5

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
Haha, thanks.

I've actually got it working exactly the way you have over the weekend and was just to about to proudly post the solution! You beat me to it.

BUT.... there is a small problem with the stored procedure. Simply changing the date order only works until you've reach the set ROWCOUNT!! At that point it just shows the oldest messages, albiet in the right order.

Looking at it now, but if you find anything please let me know.

Ta
Back to top
Offline slikvik  
#7 Posted : 21 June 2010 11:59:48(UTC)
slikvik


Rank: YAF Forumling

Reputation:

Joined: 14/06/2010(UTC)
Posts: 5

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
OK fixed it. You need to change the query to something like this...

Code:
USE [YAFF]
GO
/****** Object:  StoredProcedure [dbo].[yaf_shoutbox_getmessages]    Script Date: 06/21/2010 09:43:52 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
/*****************************************************************************************************
//  Original code by: DLESKTECH at http://www.dlesktech.com/support.aspx
//  Modifications by: KASL Technologies at www.kasltechnologies.com
//  Modifications for integration into YAF/Conventions by Jaben Cargman
*****************************************************************************************************/

ALTER PROCEDURE [dbo].[yaf_shoutbox_getmessages]
(
  @NumberOfMessages int, @StyledNicks bit = 0
)  
AS
BEGIN	
		SET ROWCOUNT @NumberOfMessages
SELECT  t1.Username,
		t1.UserID,
		t1.Message,
		t1.[Date],
				Style = case(@StyledNicks)
	        when 1 then  [dbo].[yaf_get_userstyle](UserID)  
	        else ''	 end	
FROM (SELECT TOP 30 t2.*		
		FROM
		[dbo].[yaf_ShoutboxMessage] t2
		ORDER BY t2.[Date] DESC) t1

ORDER BY t1.[Date]

SET ROWCOUNT 0
		
		END


There might be a better way but it was all I could come up with in 5 minutes.

Regards

Vic
Back to top
thanks 1 user thanked slikvik for this useful post.
logan on 22/06/2010(UTC)
Offline logan  
#8 Posted : 22 June 2010 00:37:36(UTC)
logan


Rank: YAF Leader

Reputation:

Medals: Medal of Honor for the Support Knight: Given to a community member who has answered lots of support questions.

Joined: 15/03/2008(UTC)
Posts: 311

Thanks: 13 times
Was thanked: 62 time(s) in 56 post(s)
Thanks Vic works Great[biggrin]
test
Back to top
Offline slikvik  
#9 Posted : 22 June 2010 12:23:39(UTC)
slikvik


Rank: YAF Forumling

Reputation:

Joined: 14/06/2010(UTC)
Posts: 5

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
Just to let you know that I've been playing with alternate scripts too.

One small issue with pausing the timer on mouseover is that people are finding messages appearing a bit more quirky. :wink:

So i tried the following:

Code:
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
			var scrollPos;
			function BeginRequestHandler(sender, args) {
			    var elem = document.getElementById('shoutScroll');
			    scrollPos = elem.scrollTop;
			    if (scrollPos == elem.scrollHeight) {
			        scrollPos = 10000;
			    }
			    //alert(scrollPos);"+
			}
            function EndRequestHandler(sender, args) {
			    var elem = document.getElementById('shoutScroll');
                 elem.scrollTop = scrollPos;
				 //alert(scrollPos);
				 }


This stores the position before a request and then restores it after. This allows messages to continue to flow and the user can leave the scroll bar where they choose to leave it. It also removes the need for the two mouseover scripts. Unfortunately this has its own quirk too. Say the BeginHandler captures scrollPos at 50 and then you start moving, when EndHandler runs it moves your scrollbar back to 50. Not a big issue but still not perfect.

[confused]
Back to top
Offline Zero2Cool  
#10 Posted : 05 October 2017 22:12:37(UTC)
Zero2Cool


Rank: YAF Leader

Reputation:

Medals: Medal of Honor for the Support Knight: Given to a community member who has assisted lots and lots of people!

Joined: 26/04/2011(UTC)
Posts: 1,067
Man
United States
Location: in a van down by the river

Thanks: 235 times
Was thanked: 101 time(s) in 92 post(s)
I modified the stored procedure below and the ShoutBox control (forum\controls\ShoutBox.ascx) to get the order changed.

User Control change
Added this below "</asp:Panel>"
Code:
<script>
$("body").on('DOMSubtreeModified', "#shoutBoxChatArea", function() {
 $("#shoutBoxChatArea").scrollTop($("#shoutBoxChatArea")[0].scrollHeight);
}); 
</script>




Stored Procedure change
Code:

Alter  PROCEDURE [dbo].[yaf_shoutbox_getmessages]
(
  @BoardId int,
  @NumberOfMessages int, @StyledNicks bit = 0
)  
AS
BEGIN

    --SELECT TOP(@NumberOfMessages)
    --    sh.[ShoutBoxMessageID],
    --    sh.UserName,
    --    sh.UserID,
    --    sh.[Message],
    --    sh.[Date], 
    --    Style= case(@StyledNicks)
    --        when 1 then  usr.UserStyle
    --        else ''    end
                
    --FROM
    --    [dbo].[yaf_ShoutboxMessage] sh
    --    JOIN [dbo].[yaf_User] usr on usr.UserID = sh.UserID
    --WHERE 
    --    sh.BoardId = @BoardId
    --ORDER BY sh.Date DESC

    DECLARE @maxid int
   SET @maxid = (SELECT MAX(ShoutBoxMessageID) FROM [dbo].[yaf_ShoutboxMessage]);

   SELECT TOP(@NumberOfMessages)
        sh.[ShoutBoxMessageID],
        sh.UserName,
        sh.UserID,
        sh.[Message],
        sh.[Date],
        Style= case(@StyledNicks)
            when 1 then  usr.UserStyle
            else ''    end

    FROM
        [dbo].[yaf_ShoutboxMessage] sh
        JOIN [dbo].[yaf_User] usr on usr.UserID = sh.UserID
    WHERE
        sh.BoardId = @BoardId
      AND 
      sh.ShoutBoxMessageID >= (@maxid - @NumberOfMessages + 1)
    ORDER BY sh.ShoutBoxMessageID ASC, sh.Date ASC
END

Edited by user 06 October 2017 03:22:40(UTC)  | Reason: Not specified
Back to top
WWW
Rss Feed  Atom Feed
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2018, Yet Another Forum.NET
This page was generated in 0.100 seconds.

Notification

Icon
Error

About

The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

Project Twitter Updates

Contact Us

Email: Email Contact

Stay Connected

Powered by Resharper

Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved Privacy Policy