jQuery: fadeIn an entire table column

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I've got a table that looks like it will stay around 5 columns and maybe 50 rows max. One of the columns is only needed if a certain one of 5 "with selected" options is selected in the <select> element near the submit button.

Basically one option will send a list of checkboxes to the server, the server will lookup those ids and ping other servers, then the server will return the results. Rather than reload the entire page, I'd like to send the selected row ids via AJAX one at a time and display the status returned in that optional column.

So, now that you have an idea why I need an optional column, how would you go about making that column fade in/out when that "with selected" <select> element fires onchange and it's needed ?

One solution I can think of is to use <col> elements and have jQuery target that column, I don't know how jQuery will work with <col> elements on multiple browsers though. I usually stay away from <col> elements with styling because I always end up with some sort of bug whether it be something I did or a browser bug.

Another solution, the one I'm thinking of going with, would be to assign each <td> and the <th> for that column a class name that I can target with jQuery. Something like "optional" then I do something like this.

JAVASCRIPT Code: [ Select ]
$('table .optional').fadeIn(250, callback);


It's nice and simple, but it's always worth asking to see if there's something simpler. :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Normally I'm lazy and I'd use a class or other method, NEVER the <col> element.

How about something that iterates each tr and messes with the last cell?

JAVASCRIPT Code: [ Select ]
$('table#optional tr').each(function() {
  $(this).find("td:last").fadeOut(250);    
}
 
  1. $('table#optional tr').each(function() {
  2.   $(this).find("td:last").fadeOut(250);    
  3. }
  4.  


Or if you're adding them, append a cell to the inner HTML of the TR?

Seems kind of crazy/over meticulous.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

The ".optional" bit on <td> elements with "fadeIn" works, but it causes my table to shift position when fading in and out. I think what I'm going to end up doing is altering visibility along with using ".animate" and opacity instead of "fadeIn/Out".

I might skip the visibility and just have the faded out state of the column be a very low alpha so that there's a sort of "disabled column" hint there and the fadeIn isn't completely unexpected that first time using it.
  • PolishHurricane
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1585

Post 3+ Months Ago

Yeah I think that's a good idea. I'd do that, low alpha FTW.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 74 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.