Alternative to JQuery hide show? or Jquery Update?

Question

Hi there..

I have nearly finished a table which has hidden object and sorts..

$(".ICS_BlueTable").tablesorter(); 

$(".ICS_BlueTable").bind("sortStart",function() { 
  $('.ICS_Artist_Hide',this).toggle();                          
  $('tr',this).removeClass("ICS_Artist_Hide");               
}).bind("sortEnd",function() { 
  $("tr:gt(4)", this).addClass("ICS_Artist_Hide");           
  $('.ICS_Artist_Hide',this).toggle();                                      
});

The problem with this is that there is a visible "flick" when the sorting is done as you can see the content showing and hiding. Is there a way to just recalculate the hidden items and then "refresh" the current table so that it just shows the ones that it needs to without a "flick".

Thanks

Chris

Answer 1

You could hide the whole table do the changes then show the table again. You could do this by fading in a div over the top and then fading it out again when the sorting is done. This would need to be before call the table sorter then again once the process is complete.

Answer 2

If you simply don't want it hidden then remove the hide command... I assume since you didn't just do this that you're looking for a 'middle-ground'.

A simple answer which will still make it disappear/reappear would be to put the table in a div and simply set the height of that div in the sort event to be it's height at the time (EG: $(this).parent().height($(this).parent().height());), then once you're finished sorting let it go back to normal height settings (EG: $(this).parent().height('auto');. This will prevent other page contents from moving up and down when you hide the table rows, which is typically the most noticeable portion of any flickering that occurs. You could also consider setting a CSS class on that div which causes some kind of sorting image/animation to appear to make the user confident that their table is coming back.