Display Animated Number Counter from Zero To Value in ASP.Net DataList using jQuery

Last Reply one month ago By dharmendr

Posted one month ago

hello,

i have this listview. i have label inside listview.

i want when user scroll down page and reach to the listview lblcount should have animation like rolling the number as it is on most website while showing number like numbers come with rolling animation

<asp:ListView ID="ListView1" runat="server" OnItemDataBound="ListView1_ItemDataBound">
    <ItemTemplate>
        <asp:Label ID="lblid" runat="server" Text=' <%# Eval("platformid") %>' Visible="false"></asp:Label>
        <div class="col-md-3 col-xs-6">
            <div class="category">                  
                <div class="imgbox">
                    <asp:Image ID="promoterimage" runat="server" ImageUrl=' <%# Eval("icon") %>' />
                </div>
                <h4 >                      
                    <asp:Label ID="lblplatform" runat="server" Text=' <%# Eval("platformname") %>'></asp:Label>  
                    <br />
                    <small>
                        <asp:Label ID="lblcount" runat="server" CssClass="extra-bold"></asp:Label>                          
                    </small>
                </h4>                  
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>
Posted one month ago Modified on one month ago

Hi nauna,

Check this example to display the rolling animation.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('.count').each(function () {
            $(this).prop('Counter', 0).animate({
                Counter: $(this).text()
            }, {
                duration: 3000,
                easing: 'swing',
                step: function (now) {
                    $(this).text(Math.ceil(now));
                }
            });
        });
    });
</script>
<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <asp:Label ID="lblid" runat="server" Text=' <%# Eval("platformid") %>' Visible="false"></asp:Label>
        <div class="col-md-3 col-xs-6">
            <div class="category">
                <div class="imgbox">
                    <asp:Image ID="promoterimage" runat="server" Height="50px" Width="50px" ImageUrl='<%# Eval("icon") %>' />
                </div>
                <h4>
                    <asp:Label ID="lblplatform" runat="server" Text='<%# Eval("platformname") %>'></asp:Label>
                    <br />
                    <small>
                        <asp:Label ID="lblcount" runat="server" CssClass="extra-bold count" Text='<%# Eval("count") %>'></asp:Label>
                    </small>
                </h4>
            </div>
        </div>
    </ItemTemplate>
</asp:ListView>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[] { 
                        new System.Data.DataColumn("platformid", typeof(int)),
                        new System.Data.DataColumn("platformname", typeof(string)),
                        new System.Data.DataColumn("icon",typeof(string)),
                        new System.Data.DataColumn("count",typeof(int))});
        dt.Rows.Add(1, "Platform A", "~/Icon/A.png", 300);
        dt.Rows.Add(2, "Platform C", "~/Icon/calender.png", 1200);
        dt.Rows.Add(3, "Platform P", "~/Icon/P.png", 800);
        ListView1.DataSource = dt;
        ListView1.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As System.Data.DataTable = New System.Data.DataTable()
        dt.Columns.AddRange(New System.Data.DataColumn() {
                            New System.Data.DataColumn("platformid", GetType(Integer)),
                            New System.Data.DataColumn("platformname", GetType(String)),
                            New System.Data.DataColumn("icon", GetType(String)),
                            New System.Data.DataColumn("count", GetType(Integer))})
        dt.Rows.Add(1, "Platform A", "~/Icon/A.png", 300)
        dt.Rows.Add(2, "Platform C", "~/Icon/calender.png", 1200)
        dt.Rows.Add(3, "Platform P", "~/Icon/P.png", 800)
        ListView1.DataSource = dt
        ListView1.DataBind()
    End If
End Sub

Screenshot