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
2. Set the ID of the ShoutBox <div>
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>
<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
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.
<script type="text/javascript">
function setChatScroll(){
var div = document.getElementById('divShoutBox');
if (div)
div.scrollTop = 10000
}
</script>
<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.😉
😁 I like it this way 👍
Edited by user
2010-06-21T22:45:35Z
|
Reason: fix errors added no source function
test