Jquery.gridLayout + filterable div boxes & # 8594; without resorting to help

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 communities, but no one could help. So I just hope for the best here. I am not a jscript professional or anything else. I just pack my things and hope it works. So here is what I did. I took a tutorial from nettuts + on the filtered portfolio and added the jQuery-plugin "jQuery.gridLayout" (phase -change.org/jquery.gridlayout/) Everything works fine. Divs are sorted by grid, and when I click the category button, they disappear. But they must resort after they disappear. Right now, the boxes remain in place, leaving huge gaps everywhere.

My javascript call is as follows

$(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();


});

18735.webhosting7.1blu.de/test/

, stackoverflow .

Answer 1

, . , , :

:

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

, ul#navigation, ? :

$(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;   
    });
});