Почему у IE неправильные поля после анимации?

Я использую jQuery Masonry (погуглите, это супер круто) для динамического макета моего сайта.

По какой-то причине, когда я вызываю Masonry после выполнения события .load(), я не получаю именно тот макет, который ожидался.

Чтобы понять, что я имею в виду, перейдите на http://keepskatinbro.com, затем щелкните любое поле, чтобы открыть его, затем вы заметите, что макет настроен таким образом, что закрытые блоки плавают вокруг открытого блока. Проблема в том, что ящики под открытым ящиком перекрываются с нижней частью открытого ящика.

Если вы измените размер своего браузера (восстановите, а затем разверните), вы увидите правильный макет, потому что Masonry срабатывает при изменении размера браузера. Обратите внимание, что после изменения размера вашего браузера теперь есть поле под большим открытым полем.

Это поле должно быть там после того, как я динамически открываю и вставляю содержимое в поле.

Хотя в других браузерах работает отлично.

Это код, благодаря которому все происходит. Несколько функций, затем, наконец, последний блок вызывает все, включая masonize(). Masonize() хорошо работает сам по себе, но в обратном вызове у меня, кажется, есть описанная проблема:

function masonize(the_duration, callback) {
    $('#sort').masonry({
        singleMode: false,
        columnWidth: 175,
        itemSelector: undefined,
        appendedContent: undefined,
        saveOptions: true,
        resizeable: true,
        animate: true,
        animationOptions: {
            easing: 'swing',
            duration: the_duration
        }
    }, function() {
        $(this).css({ margin: '10px' });
        if (callback) {
            $(this).delay(the_duration)
            $(this).queue(function() {
                callback();
                $(this).dequeue();
            });
        }
    });
}
function set_position($target_item, top_offset, left_offset) {
    $target_item.css({ 'position':'absolute', 'top':top_offset+'px', 'left':left_offset+'px' });
}

function show_loader($target_box, callback) {
    var $target_box_img     = $target_box.find('img.wp-post-image'),
        $target_img_offset  = $target_box_img.offset(),
        $target_img_width   = $target_box_img.width(),
        $target_img_height  = $target_box_img.height();
    set_position( $ajaxSpinner,
        /*top*/  $target_img_offset.top + ($target_img_height / 2) - ($ajaxSpinner.width() / 2),
        /*left*/ $target_img_offset.left + ($target_img_width / 2) - ($ajaxSpinner.height() / 2)
    );
    $ajaxSpinner.fadeIn(function() {
        if (callback) { callback(); }
    });
}

function hide_loader(callback) {
    $ajaxSpinner.fadeOut(/*duration:*/0, function() {
        if (callback) { callback(); }
    });
}

function open_box($target_box, $target_path, $target_content, do_masonize, callback) {
    $target_box.find('.opened_view')
        .load(base + $target_path + ' ' + $target_content, function() {
            $target_box.find('.closed_view').addClass('hidden');
            $target_box.find('.thumbnail_wrapper').addClass('hidden');
            $target_box.find('.ajax_trigger_title').addClass('opened_post_title');
            $target_box.width(660);
            $target_box.append('<a class="ajax_trigger_close" id="close_' + $target_box.attr('id') + '" href="' + base + '/">Close</a>');
            if (do_masonize && callback) {
                masonize(masonize_duration, function(){
                    callback();
                });
            }
            else if (do_masonize && !callback) { masonize(masonize_duration); }
            else if (callback) { callback(); }
        });
}

function close_box($target_box, do_masonize, callback) {
    $target_box.find('.opened_view').html('');
    $target_box.width(310);
    $target_box.find('.closed_view').removeClass('hidden');
    $target_box.find('.thumbnail_wrapper').removeClass('hidden');
    $target_box.find('.ajax_trigger_title').removeClass('opened_post_title');
    $target_box.find('a.ajax_trigger_close').remove();

    if (do_masonize && callback) {
        masonize(masonize_duration, function(){
            callback();
        });
    }
    else if (do_masonize && !callback) { masonize(masonize_duration); }
    else if (callback) { callback(); }
}

function scroll_to($target, duration, top_margin, callback) { //scrolls the page to the $target. $target can be a jQuery object or the number of pixels to scroll from the top.
    if ($target instanceof $ || $target instanceof jQuery) {
        $('html, body').animate({
            scrollTop: $target.offset().top - top_margin
        }, duration, function() {
            if (callback) { callback(); }
        });
    }
//three ways to check for an integer below:
    else if ($target === parseInt($target,10)) { //else if integer
    //else if ( (typeof($target) == 'number') && ($target.toString().indexOf('.') == -1) ) { //else if integer
    //else if ( !isNaN(parseInt($target)) ) { //else if integer
        $('html, body').animate({
            scrollTop: $target
        }, duration, function() {
            if (callback) { callback(); }
        });
    }
}

$.address.change(function(event) {
    if (event.value !== '/' && $clicked_item) {
        if ($target_close) { //if not first item to be opened then close previously opened item.
            show_loader($target_open, function() {
                open_box($target_open, /*path:*/event.value, '.entry-content', /*masonize:*/false, function() {
                    close_box($target_close, /*masonize:*/true, function() {
                        scroll_to($target_open, /*duration:*/360, /*top-margin:*/80);
                    });
                    hide_loader();
                    $target_close = $target_open;
                });
            });
        }
        else { //otherwise just open target item since it is the first item to be opened.
            show_loader($target_open, function() {
                open_box($target_open, /*path:*/event.value, '.entry-content', /*masonize:*/false, function() {
                    hide_loader();
                    masonize(masonize_duration, function() {
                        scroll_to($target_open, /*duration:*/360, /*top-margin:*/80);
                    });
                    $target_close = $target_open;
                });
            });
        }
    }
    else if ( event.value === '/' && $clicked_item ) {
        if ( $clicked_item.hasClass('ajax_trigger_close') && $clicked_item.attr('id') !== 'home_link' ) {
            close_box($target_close, /*masonize:*/true);
            scroll_to(/*offset:*/0, /*duration:*/360);
        }
    }
});

Любая идея, в чем может быть проблема? Заранее спасибо!


person trusktr    schedule 11.03.2011    source источник
comment
Масонство — это старые новости. Идите в ногу со временем и играйте с Isotope! isotope.metafizzy.co   -  person Bryan Downing    schedule 11.03.2011
comment
О стрелять!! хаха... хорошо попробую..   -  person trusktr    schedule 11.03.2011


Ответы (2)


Я читал об этой ошибке, которая может повлиять на вас (это проблема IE):

"jQuery $(anchor).offset().top, кажется, изменяет расчет позиции смещения после того, как происходит прокрутка. Например, если вы не прокручиваете контейнер, позиция будет 300 сверху. Но если вы начнете прокручивать немного ниже, положение меняется!

Чтобы решить эту проблему, я использую document.getElementById(anchor).offsetTop"

Итак, попробуйте заменить:

$target.offset().top

с

document.getElementById($target.attr('id')).offsetTop

и посмотрите, поможет ли это вам.

person Jeremy Battle    schedule 11.03.2011
comment
Эй, я пробовал, но проблема остается точно такой же. Любые другие идеи? - person trusktr; 13.03.2011

Ответ заключается в том, что в IE кладка завершалась до того, как содержимое в DOM было полностью загружено после использования ajax-вызова jQuery, поэтому блоки еще не имели своего окончательного размера.

person trusktr    schedule 24.03.2011