jquery.gridLayout + фильтруемые блоки div -> не прибегают

Question

Эй, ребята, я из Германии, поэтому, пожалуйста, не судите меня за мои плохие навыки английского языка. Я разместил этот вопрос в некоторых других сообществах, но никто не мог помочь. Так что я просто надеюсь на лучшее здесь. Я не JScript Pro или что-нибудь. Я просто собираю вещи и надеюсь, что это сработает. Итак, вот что я сделал. Я взял урок из nettuts + о "фильтруемом портфолио" и добавил плагин jquery "jQuery.gridLayout" (phase-change.org/jquery.gridlayout/). Div сортируются по сетке, и когда я щелкаю ссылку на категорию, они исчезают. Но они должны прибегнуть к помощи после того, как они исчезнут. Прямо сейчас ящики остаются на своих местах, оставляя огромные пробелы повсюду.

Мой вызов JavaScript выглядит так

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