CODEWITHSUNDEEP
javascripthtmlasp.net
rahul desai
rahul desai

Reputation: 81

Maintain div scroll position after ajax refresh

I have created a plain asp.net application for web chat.

After every chat box (div) refresh, it scroll's to top. I want to maintain it to its current position.

Tried, but doing something wrong. Getting var div and "hdndiv" values null inside windows.load. Help me out!!

<script>

window.onload = function () {
    debugger;
    var div = document.getElementById("divMessages");
    var hdndiv_position = document.getElementById("hdndiv_position");
    var position = parseInt('<%=Request.Form["hdndiv_position"] %>');
    if (isNaN(position)) {
        position = 0;
    }
    div.scrollTop = position;
    div.onscroll = function () {
        div_position.value = div.scrollTop;
    };
};


<table style="width: 100%" cellpadding="0" cellspacing="0">
<tr>
    <td style="padding-left: 10px; padding-right: 10px; padding-bottom: 5px;">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="divMessages" style="width: 100%; height: 300px; table-layout: fixed; word-wrap: break-word; border: 1px solid #ddd; overflow: scroll; " runat="server">
                </div>
                <asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
                </asp:Timer>
            </ContentTemplate>
        </asp:UpdatePanel>
    </td>
</tr>
<tr>
    <td>
        <asp:Label ID="lblError" ForeColor="Red" runat="server" />
        <asp:HiddenField ID="hdnFromUserId" Value="-1" runat="server" />
        <asp:HiddenField ID="hdnFromUserName" Value="" runat="server" />
        <asp:HiddenField ID="hdnToUserId" Value="-1" runat="server" />
        <asp:HiddenField ID="hdnToUserName" Value="" runat="server" />
        <asp:HiddenField ID="hdnScrollPos" Value="" runat="server" />
        <asp:HiddenField ID="hdndiv_position" Value="" runat="server" />
    </td>
</tr>
<tr>
    <td style="padding: 10px;">
        <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="padding-right: 10px;">
                    <asp:TextBox ID="txtChat" TextMode="MultiLine" Rows="2" Width="100%" runat="server" />
                </td>
                <td style="width: 80px;">
                    <asp:Button ID="btnSend" CssClass="btn" Text="Send" OnClick="btnSend_Click" runat="server" /></td>
            </tr>
        </table>
    </td>
</tr>

Upvotes: 2

Views: 937

Answers (2)

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

As question is related to asp.net , In web-form you can maintain the Scroll Postion for that Particular page with the following attribute:

In page directive you need to set MaintainScrollPositionOnPostback

Ex: 

MaintainScrollPositionOnPostback="true"

with Page Attribute it looks as follows

<%@ Page Title="Test" Language="C#" MaintainScrollPositionOnPostback="true" %>

Edit: For Update Panel please refer the following link

https://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/

Content taken from above link

enter image description here

Upvotes: 1

Bimbonkens
Bimbonkens

Reputation: 319

Don't know a thing about asp.net, but here is how i helped another user of stackoverflow:

http://jsfiddle.net/jzfn7mun/1/

$('.target').stop().animate({
    scrollTop: $('.icon-box.active').offset().top - 
        $('.icon-box.active').parent('div').position().top
});

You could use the :last-child selector to do the same thing, and set animate() duration to something like 1ms.

Also what you can do, is on chatbox refresh, give an ID to the last message, and use 

window.location.href = "#msgID";

But i am not sure how it will work inside a scrollable div, you will have to test it.

Hope you can make some progress with these bits!

Upvotes: 0

Related Questions