This seems to work in all newer version browsers.
1. Reverse the message list.
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