new to jquery: need help putting fade in/out script together

Question

My in initial problem: I have a table with basic information about clients on the top half of the the screen. I want to put a div on the bottom half of the screen that will show detailed information about the client when the name is clicked on on the table in the top half.

I found a bunch of great examples on the jquery end of the problem right here in stackoverflow

Here: Fade out a div with content A, and Fade In the same div with content B
And Here: How to fade out div slowly, update content, and then fade in div slowly, using jQuery?

But my problem is how to get it to work for me and I know it's just because I don't understand how jquery works.

Here's something close to what my site looks like now:

<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Account Number</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">Joe Smith</a></td>
<td>3838.3234</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">Jane Doe</a></td>
<td>915.70</td>
</tr>
...
</table>
<div id="client_details>
this is where I want the client details to go that will have more information than the table up above
</div>

It seems like a really easy thing to do. I just don't know how to setup the client details information and the links so it fades in the current (clicked) client's info and fades out the previous one.

score 1 · Accepted Answer · answered Jul 12 '11 at 12:58

1

The other answers provide solid guidance, and while it is as simple as simply doing a chained fadeOut.fadeIn, if you want them to fade-in-fade-out at the same time for a nicer effect without any delays and without first waiting for one to fadeout and the other to fade in, you can do what I did in this fiddle:

http://jsfiddle.net/gLaDq/22/

answered Jul 12 '11 at 12:58

Swader

11,387
14
50
84

That's what I needed. Not only the code, but a place to play around with it and understand how it works. Thank you. – mikepreble Jul 12 '11 at 13:04
Glad it helped. If you have loads of users, you might want to consider Ajax calls instead though - look up jQuery's GET and take a look at some examples, it's all dead simple and makes both yours and the life of your server easier. – Swader Jul 12 '11 at 13:22
At the top of the script I have the current set of clients loaded into an array (clients are loaded based on who logs in) so I'm just doing 1 db call. But I might look into that if I want to give people the ability to view everyone (600+ clients). Thanks for the advice. – mikepreble Jul 12 '11 at 13:27

Kon · Answer 2 · 2011-07-12T18:10:02.967

0

Have you tried any jQuery at all?

The basics of what you want to do would look something like this:

$('#elementId').fadeOut().html('[NEW MARKUP]').fadeIn();

edited Jul 12 '11 at 18:10

answered Jul 12 '11 at 12:31

Kon

27,113
11
60
86

While I get that concept, how can I make the [NEW MARKUP] section display the correct information for 200+ clients? Do I set up a div for each client with the detail information and the div's display set to none? How do I get the link to specify that client's detail information? – mikepreble Jul 12 '11 at 12:43
@mikepreble Use ajax calls to do that. Read the documentation for jQuery's GET - this lets you retrieve fragments of the information on demand. Loads of tiny requests is always better than one huge memory hogging display:none intensive display. – Swader Jul 12 '11 at 13:20

score 0 · Answer 3 · answered Jul 12 '11 at 12:32

first, you need to add ids or class to your links. I.E:

<a href="#" id="jane_doe" class="client">Jane Doe</a>

Then, with jQuery:

   $('.client').click(function(){
//When you click on a link which has the 'client' class...

$('#client_details').fadeOut(100).html('the client details information').fadeIn(100);
});

If you need to load the client info, have a look on Ajax ($.post(), $.load())

new to jquery: need help putting fade in/out script together

3 Answers3