.Net Chat Application

Question

hi techies,

i am developing chat application using vb.net and asp.net where i am having a div tag inside which i am displaying the messages posted by the online users what my problem is when the messages are more and exceeds the height of the div tag then i am not comfortable to view the previous messages because i have set the scroll bar position to always to be pointed to bottom,

for clarity i have pasted my code please go through it and suggest your ideas

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="ChatContent" runat="server" style="height: 250px; vertical-align: top; overflow:auto; text-align: left; margin-left: 10px; width: 97%;">
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel3" runat="server"UpdateMode="Conditional">  
    <ContentTemplate> 
        <textarea id="UserInputTextBox" cols="72" rows="3" runat="server" onkeyup="if(event.keyCode == 13) Button2.click();" >
        </textarea> 
         <asp:Button ID="Button2" runat="server" CssClass="button" Text="Send" OnClick="Button2_Click" UseSubmitBehavior="False" />
         <script type="text/javascript">
         Sys.Application.add_load(function() { 
             var t = document.getElementById('ChatContent'); 
             t.scrollTop = t.scrollHeight; 
         });
         </script>
    </ContentTemplate> 
</asp:UpdatePanel>

Thanks

Shakthi

Answer 1

When working with AJAX.NET you can use the PageRequestManager in JavaScript to monitor an AJAX callback being finished; specifically, it's endRequest event.

From what I can see, you haven't shown us your code for making sure the scrollbar is always at the bottom, but it seems from your comment that it constantly scrolls the div down, so I suggest you move the part of your code that scrolls the div down, from whatever setInterval you've been using, to the endRequest, and include a check in endRequest to see if the value has changed:

var contentLength = 0;

var requestMan = Sys.WebForms.PageRequestManager.getInstance();
requestMan.add_endRequest(function() {

    // get a reference to your ChatContent div, by whatever means you prefer
    var container = document.getElementById( /* your ChatContent id */ );

    // this is fired at the end of a javascript callback
    // check if new posts were added in this callback

    if(content.innerHTML.length > contentLength) {

        // update this var, so that the same check won't evaluate to true at next callback
        contentLength = content.innerHTML.length;

        // scroll the div to its bottom, by whichever means you were doing it before
        content.scrollTop = 100000;
    }
});

EDIT

Based on your input, I'll revise my answer, so that it uses your code, and requires as few changes as possible. What you've got there, is code that keeps scrolling down the DIV, and you want to change it so that it only scrolls the DIV if the content of the DIV has changed:

     <script type="text/javascript">
     var contentLength = 0; // add this global var
     Sys.Application.add_load(function() { 
         var t = document.getElementById('ChatContent'); 

         if(t.innerHTML.length > contentLength) // <- add a condition here
             t.scrollTop = t.scrollHeight; 
     });
     </script>

Just replace your script block with this, in your updatepanel, and you should be able to leave the rest as it is.