Stop ASP.Net Ajax Timer on DIV scroll up using jQuery

nauna
 
on Jun 13, 2021 10:13 PM
2669 Views

It works well, the only problem is coming user is unable to scroll up it keeps pushing user on bottom

Scroll Panel to bottom (last line) after ASP.Net Ajax Timer refresh using C# and VB.Net

So I think we have to add more logic that once user do scroll up then script should not push user to bottom.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jun 14, 2021 05:59 AM
on Jan 24, 2022 09:20 AM

Hi nauna,

Refer below code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function ScrollPanelBottom() {
        var text =  $('.container');
        text.scrollTop(text[0].scrollHeight);
    };

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                var text = $('.container');
                text.scrollTop(text[0].scrollHeight);
            }
        });
    };

    $(function () {
        $('.container').on('mousedown', function (e) {
            $('#hfX').val(event.pageX);
        });

        $('.container').on('mouseup', function (e) {
            if (parseInt($('#hfX').val()) >= e.pageX) {
                var timer = $find('<%=timer.ClientID %>');
                timer._stopTimer();
            }
        });

        $('.container').on('mousewheel', function (e) {
            var timer = $find('<%=timer.ClientID %>');
            if (e.originalEvent.wheelDelta >= 0) {
                timer._stopTimer();
            } else {
                timer._startTimer();
            }
        });

        $('.content').on('mousedown', function (e) {
            e.stopPropagation();
        });
    });
</script>
<asp:ScriptManager runat="server" />
<asp:HiddenField ID="hfX" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<div class="comment">
    <asp:Panel ID="Panel2" class="container" runat="server" Height="100px" ScrollBars="Vertical"
        Style="background-color: antiquewhite;">
        <div class="content">
            <asp:UpdatePanel runat="server" ID="upecompetechatlist" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Timer ID="timer" runat="server" Interval="1000" OnTick="Timer1_Tick">
                    </asp:Timer>
                    <asp:Label ID="lbltext" runat="server"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </asp:Panel>
</div>

Code

C#

static int a = 1;
protected void Timer1_Tick(object sender, EventArgs e)
{
    // your stuff to refresh after some interval
    lbltext.Text += "<br/> Message " + a;
    a = a + 1;
}

protected void Button1_Click(object sender, EventArgs e)
{
    string script = "window.onload = function() { ScrollPanelBottom(); };";
    ClientScript.RegisterStartupScript(this.GetType(), "message", script, true);
}

VB.Net

Shared a As Integer = 1
Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
    lbltext.Text += "<br/> Message " & a
    a = a + 1
End Sub

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim script As String = "window.onload = function() { ScrollPanelBottom(); };"
    ClientScript.RegisterStartupScript(Me.GetType(), "message", script, True)
End Sub

Screenshot