0

Hello All,

I want to have a fade in fade out animation(AJAX) on each row of the data fetched from the database.I was wondering what will be the best method to do it? I can have the data stored in a datalist but that will always render the whole data and will not do a row by row fade in fade out.

Also,is there any way I can do fade in fade out without any using any animation properties like On Load,On Click,On MouseHover etc.?

Please,give your suggestions and ideas.


Thanks.

3
Contributors
7
Replies
12
Views
7 Years
Discussion Span
Last Post by bunnie
0

1. Give the div you want to hide and show, which contains the data, an ID, like 'post-1' for the line with the ID of 1, and 'post-2' and so on...
2. Hide it with CSS (display:none)
3. Use a JQuery function to fade it in and out:

function toggleDiv(var divId) {
    if($("#" + divId).css("display") == "none") {
        $("#" + divId).slideDown("slow");
    } else {
        $("#" + divId).slideUp("slow");
    }
}

4. Add an onclick-event to the link and use this function and pass it the post-1 or whatever value according the the current database line.

5. Good luck.

P.S. I didn't read all your question 'cause I'm kind of in a rush, but I guess this was the answer for you. I'm sorry if not.

0

Thanks for the reply.Is there anything which I can use in AJAX or plain HTML? I have never used JQuery and I do not have any idea about using it.

0

1. Give the div you want to hide and show, which contains the data, an ID, like 'post-1' for the line with the ID of 1, and 'post-2' and so on...
2. Hide it with CSS (display:none)
3. Use a JQuery function to fade it in and out:

function toggleDiv(var divId) {
    if($("#" + divId).css("display") == "none") {
        $("#" + divId).slideDown("slow");
    } else {
        $("#" + divId).slideUp("slow");
    }
}

4. Add an onclick-event to the link and use this function and pass it the post-1 or whatever value according the the current database line.

How do I use JQuery in the context of a datalist? I understand that the data list is rendered as a table but how do I use it? Suppose,I have a code which is something like this:

<asp:Datalist ID="Datalist_NewsItems" runat="server">

     <ItemTemplate>
    
    <strong>Id:</strong>
     <asp:Label ID="Label_Id" runat="server" Text='<%#Eval("Id").ToString()%>'></asp:Label>
     <br />
        <asp:Label ID="Label_News" runat="server"  Text='<%#Eval("News").ToString()%>'>   </asp:Label>
    </ItemTemplate>
     </asp:Datalist>

How do I use JQuery to fade in and fade out the 2 rows of the datalist,simultaneously and in a sequence one after the another? So,basically I am looking to implement a news ticker.


Thanks.

0

I suggest you to use a <asp:Repeater runat="server" /> Control.
This way you have more control on the display mark up.

0

I used something like this:

<head runat="server">
    <title></title>
      <script type="text/javascript" src="jquery-1.4.2.js"></script>
       <script type="text/javascript" src="jquery.jticker.js"></script>
      
     <script type="text/javascript">
          $(function () {
              $('#ticker').ticker();
          });

      </script>
      <style type="text/css">
      #ticker
        {
            width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;
        }
      </style>
</head>

<body>
    <form id="form1" runat="server">
    
     <asp:Repeater ID="Repeater_NewsItems" runat="server">
     <HeaderTemplate>
     <div id="ticker">
     </HeaderTemplate>
     <FooterTemplate>
     </div>
     </FooterTemplate>
       <ItemTemplate>
    <div>
    <h3>News ID: <%#Eval("NewsID")%></h3>
     <p><%#Eval("Abstract")%></p>   
     
    </div>
    </ItemTemplate>
     </asp:Repeater>
    
    </form>
</body>

but the plugin doesn't seem to be working.Do you have any ideas?

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.