[jQuery] jquery.gridLayout + filterable div boxes --> not resorting

Question

Hey Guys, i m from Germany so please don't judge me for my bad englsh skills. I posted this question in some other communitys but nobody could help. So i'll just hope for the best here. I not a jscript pro or anything. Im just putting stuff together and hope it works. So here is what i did. I took the tutorial from nettuts+ about the "filterable portfolio" stuff and added the jquery-plugin "jQuery.gridLayout" (phase-change.org/jquery.gridlayout/) Everything is working fine. The Divs get sorted on the grid and when i click a category-link osme of them disappear. But they should be resorting, after they disappear. Right now the boxes are staying at their position, leaving huge whitespaces all over the place.

My javascript call looks like this

$(document).ready(function(){

 $('ul#navigation a').click(function() {
 $(this).css('outline','none');
 $('ul#navigation .current').removeClass('current');
 $(this).parent().addClass('current');

 var filterVal = $(this).text().toLowerCase().replace(' ','-');

 if(filterVal == 'all') {
  $('#grid li.hidden').fadeIn('slow').removeClass('hidden');
 } else {

  $('#grid .box').each(function() {
   if(!$(this).hasClass(filterVal)) {
    $(this).fadeOut('slow').addClass('hidden');
   } else { 

    $(this).fadeIn('slow').removeClass('hidden');
   }
  });

 }

 return false; 

});
$('#grid').gridLayout('.box', {col_width: 370, min_cols: 2});
 // options - (values above are the defaults)
 // col_width: the width of each grid block
 // min_cols: the minimum number of cols on the page (reducing browser width below this will not decrease number of columns). Set to your largest block (3 = block spans 3 columns)


 // gridchange event fires when window resize forces a grid refresh
 $('#grid').bind( "gridchange", function(e){
  console.log('gridchange event fired');
 });

 // returns heights of each column
 console.log( 'gridLayout.info():', $('#grid').gridLayout.info() );

// this forces a redraw of grid

  $('body').gridLayout.refresh();


});

For testing purpose i set up a page 18735.webhosting7.1blu.de/test/

i m sorry for the hyperlinks, but stackoverflow wont let me insert more than one for now.

Answer 1

Hi Mourique, off the top of my head there are a couple of things I would try. There are absolutely no guarantees they will work, but for the sake of starting this off here goes:

This line:

  $('body').gridLayout.refresh();

Maybe if you call that within your ul#navigation event handler it will rebuild the grid? Try this:

$(document).ready(function(){
    $('ul#navigation a').click(function() {
        $(this).css('outline','none');
        $('ul#navigation .current').removeClass('current');
        $(this).parent().addClass('current');
        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        if(filterVal == 'all') {
            $('#grid li.hidden').fadeIn('slow').removeClass('hidden');
        } else {
            $('#grid .box').each(function() {
                if(!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('slow').addClass('hidden');
                } else { 
                    $(this).fadeIn('slow').removeClass('hidden');
                }
            });
        }
        $('body').gridLayout.refresh();
        return false;   
    });
});