Using animation to fade in and out each row of data fetched from db? 1

[collegian]

Hello All,

I want to have a fade in fade out animation 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. Please,give your suggestions and ideas.


Thanks.

 

[jmeckley]

this has nothing to do with asp.net or webforms. both frameworks are server technologies. what you are looking for is client functionality. that happens on the browser. As such you will need to use html, css and js to accomplish this effect. jquery can make this pretty simple.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

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.

 

[jmeckley]

jquery is dead simple to use. granted some concepts are different (functional programming vs object programming) but overall is easy. just play with it for an hour or two using basic html (instead of webforms) to spike some examples.

ajax: fancy buzz word, sounds complex... it isn't. ajax stands for Asynchronous Javascript And Xml. instead of making a request and refreshing the entire page you send a request and update a small portion of the page. the technical details of an ajax request vs. a server request are 99% the same. the only differences on client is the browser will require you to handle what happens when request is returned, rather than reloading the browser window. on the server the only change is a request header is present, in case your code needs to distinguish between an standard request and an ajax request. most of the time your code doesn't need to worry about this. modern javascript libraries have an ajax api which makes ajax calls very simple.

as for showing/hiding content ajax is required if the data is already rendered in the browser. you just need to manipulate the dom & css. If the content is loaded on demand, then you will need ajax to get the data, once the data is retrieved you can render it and apply styling.

now it may be the ms ajax tool kit which is making you think ajax. this is slightly misleading. some controls in the ms ajax tool kit do infact rely on ajax. however some controls, like the calendar, are purely dom/css manipulation. no ajax what so ever.

I recommend taking a few hours to learn jquery. it may not even take that long. there are 3 excellent sources for jquery help
1.

http://www.google.com/search?q=jquery

2.

http://api.jquery.com

3.

http://forum.jquery.com

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

Thank you very much for the insights.I'll try and pick up JQuery!

 

[collegian]

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:

<aspatalist 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>
</aspatalist>


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.

 

[jmeckley]

to start, if this is read-only data, I would use a repeater to have full control over the html. this will come in very handy to work well with client scripting. datalist adds tomuch bloat to the html and viewstate for readonly data.

next, because webforms produces hideous client ids yo may need to add a class to the controls so you can gain access to the dom from jquery without dealing with ClientID.

using a jquery plugin like ticker should make this as simple as

$(function(){
   $('.[name of class]').ticker();
});

for help with jquery see the links I posted previously.

BTW, no need to call .ToString() when evaluating the data.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

next, because webforms produces hideous client ids yo may need to add a class to the controls so you can gain access to the dom from jquery without dealing with ClientID."


What does adding a class to the controls mean and how will it help? Does it mean adding a CSS class to them?

 

[jmeckley]

yes, read the introduction material on jquery, it will explain all of this.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

So I tried something like this:


<head runat="server">
<title></title>
<style type="text/css">
.tickerstyling
{
width:200px; height:180px; border:1px solid black; background:lightyellow; padding:8px; overflow:hidden;
}
</style>
<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 () {

$('.[tickerstyling]').ticker();
});

</script>
</head>
<asp:Repeater ID="Repeater_NewsItems" runat="server">

<ItemTemplate>

<div class="tickerstyling">
<strong>News Id:</strong>
<asp:Label ID="Label_Id" runat="server" Text='<%#Eval("NewsID")%>'></asp:Label>
<br />
<asp:Label ID="Label_News" runat="server" Text='<%#Eval("Abstract")%>'> </asp:Label>
</div>
</ItemTemplate>
</asp:Repeater>


I am using this ticker:

http://plugins.jquery.com/project/jTicker

. I am not sure where I am going wrong but nothing is happening except for css styling being applied to the repeater elements.

I am also getting an error: Microsoft JScript run time error-Object doesn't support this property or method when I try to run the project. I am using VWD 2010 Express.

 

[jmeckley]

$('.tickerstyling').ticker();

i used the brackets as the "replace this" text.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

I apologize for having misunderstood. However,I still get the same error.

 

[jmeckley]

is the path to the jquery and ticker scripts correct?

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

Ok,I was able to remove the error.I had some controls commented out.I simply removed them and the error stopped popping up but the actual functionality is not being implemented.All what I get are empty boxes with the css applied to them.The data is missing.

 

[jmeckley]

it could be 1 of 3 things
1. there is no data to display
2. the webforms syntax is incorrect. (although that should lead to an exception, not nothing.
3. the html is not formed so the ticker can intercept it.

solution
1. ensure there is data coming from the source.
2. ensure the html is rendered in a format ticker can understand. this would be the simplest

<div id="ticker">
   <div>
      <h3>id 1</h3>
      <p>abstract 1</p>
   </div>
   <div>
      <h3>id 2</h3>
      <p>abstract 2</p>
   </div>
   <div>
      <h3>id 3</h3>
      <p>abstract 3</p>
   </div>
</div>

which you can generate with the repeater like this

<asp:repeater>
   <headertemplate>
      <div id="ticker">
   </headertemplate>
   <footertemplate>
      </div>
   </footertemplate>
   <itemtemplate>
      <div>
         <h3>News ID: <%=Eval("NewsID")</h3>
         <p><%=Eval("Abstract")</p>
      </div>
   </itemtemplate>
</asp:repeater>

all you need then is the js

$(function(){
   $('#ticker').ticker();
});

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

Everything is fine but the data is still not getting rendered.Is there a problem with the ticker method? I can see that ticker method requires 3 arguments:elem, threadIndex, and data.I am not passing any,can this be the problem? Also,I do not know what these arguments mean since I could not find anything in the documentation.

 

[collegian]

The data is being fetched from the database properly.I could see the data in the HTML source.

 

[jmeckley]

for more help with this specific plug in, ask the developer. i believe I saw his contact information on the website.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[collegian]

Thanks for the replies.I tried another one and it worked