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.
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.
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.
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.
I suggest you to use a <asp:Repeater runat="server" /> Control.
This way you have more control on the display mark up.
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?
Thanks for the suggestions! I got it working :)
What changes did you make in the code to make it working?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.