Slide (Animate) ListView Item from Right To Left on PageLoad using jQuery in ASP.Net

Last Reply 11 months ago By dharmendr

Posted 11 months ago

i have this listview which shows 5 icon in one line, i want when it loads so it comes from right side like a slide

<asp:ListView ID="ListView1" runat="server" OnItemCommand="ListView1_ItemCommand"  >
    <ItemTemplate>
        <div class="category">   
            <asp:Label ID="Label3" runat="server" Text='<%# Eval("hasslider") %>' Visible="false"></asp:Label>
            <asp:Label ID="Label1" runat="server" Text='<%# Eval("categoryid") %>' Visible="false"></asp:Label>
            <asp:Label ID="Label5" runat="server" Text='<%# Eval("formtype") %>' Visible="false"></asp:Label>
            <asp:LinkButton ID="LinkButton9" runat="server" CommandName="getvalue" ClientIDMode="AutoID">
                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("icon") %>' />
                <h5 class="upp bold">
                    <asp:Label ID="Label4" runat="server" Text='<%# Eval("categoryname") %>'></asp:Label>
                </h5>   
            </asp:LinkButton>
        </div>
    </ItemTemplate>
</asp:ListView>

 

<style>
    .sidepanel {
        height: 100%;
        z-index: 1;
        left: 0;
        background-color: var(--theme-color);
        overflow: hidden;
        transition: 0.5s;
    }

    .slide-category{
        position:relative;
        background-color: var(--theme-color);
    }
</style>

i have this css it applies on static data but how to apply it with listview so when listview load it shows data with animation coming from left side

Posted 11 months ago

Hi nauna,

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        setTimeout(function () {
            $(".category").show('slide', { direction: 'right' }, 1500);
        }, 1000);
    });
</script>
<asp:ListView ID="ListView1" runat="server">
    <ItemTemplate>
        <div class="category" style="width: 100%; float: left; display: none;">
            <div style="width: 100%;">
                <asp:Label ID="Label3" runat="server" Text='<%# Eval("hasslider") %>' Visible="false"></asp:Label>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("categoryid") %>' Visible="false"></asp:Label>
                <asp:Label ID="Label5" runat="server" Text='<%# Eval("formtype") %>' Visible="false"></asp:Label>
                <asp:LinkButton ID="LinkButton9" runat="server" CommandName="getvalue" ClientIDMode="AutoID">
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("icon") %>' />
                    <h5 class="upp bold">
                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("categoryname") %>'></asp:Label>
                    </h5>
                </asp:LinkButton>
            </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("hasslider", typeof(int)),
                        new System.Data.DataColumn("categoryid", typeof(int)),
                        new System.Data.DataColumn("formtype",typeof(string)),
                        new System.Data.DataColumn("icon",typeof(string)),
                        new System.Data.DataColumn("categoryname",typeof(string)) });
        dt.Rows.Add(1, 1, "Form Type 1", "~/Icons/A.png", "Category 1");
        dt.Rows.Add(2, 2, "Form Type 2", "~/Icons/P.png", "Category 2");
        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("hasslider", GetType(Integer)),
                            New System.Data.DataColumn("categoryid", GetType(Integer)),
                            New System.Data.DataColumn("formtype", GetType(String)),
                            New System.Data.DataColumn("icon", GetType(String)),
                            New System.Data.DataColumn("categoryname", GetType(String))})
        dt.Rows.Add(1, 1, "Form Type 1", "~/Icons/A.png", "Category 1")
        dt.Rows.Add(2, 2, "Form Type 2", "~/Icons/P.png", "Category 2")
        ListView1.DataSource = dt
        ListView1.DataBind()
    End If
End Sub

Screenshot