2013-07-08 3 views
0

Я использую jQuery Equal Column Heights, чтобы соответствовать основному содержимому и боковым панелям на моем сайте без каких-либо проблем. Более того, у меня есть каталог участников, в котором каждый человек имеет кнопку «больше информации», которая использует toggle(), чтобы развернуть div и показать больше информации. Когда это щелкнуто, я также вызываю функцию equalHeightColumns(), чтобы настроить столбцы для расширенного div. Опять же, это работает.jQuery Isotope breaks jQuery Equal Column Heights

С тех пор я добавил Isotope, чтобы отфильтровать этот каталог участников. Он работает, но функция equalHeightColumns() больше не вызывается, когда я нажимаю кнопку «больше информации». Ошибок не обнаружено.

Мой тумблер(), equalHeightColumns (код):

$(document).delegate('.toggle', 'click', function(){ 

    // get the sibling node with class 'hidden-info' 
    var mysection = $(this).prev('.hidden-info'); 
    mysection.toggle('fast'); 
     $(this).html($(this).html() == '<td>LESS INFO</td>' ? '<td>MORE INFO</td>' : '<td>LESS INFO</td>'); 

    var fullbio = $(this).parent().parent().prev('.hidden-bio'); 
    fullbio.toggle(); 

    var partialbio = $(this).parent().parent().prev().prev('.hidden-bio'); 
    partialbio.toggle(); 

    if ($(window).innerWidth() > 800) { 
    $('#content, #sidebar, #content-sidebar-wrap').css('height' , 'auto'); 
    $("#content, #sidebar, #content-sidebar-wrap").equalHeightColumns(); 
    } 

    else { 
    $('#content, #sidebar, #content-sidebar-wrap').css('height' , 'auto'); 
    } 

}); 

Мой изотоп код:

$(window).load(function(){ 
var $container = $('.professionContainer'); 
$container.isotope({ 
    transformsEnabled: false, 
    filter: '*', 
    animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
    } 
}); 

$('.professionFilter a').click(function(){ 
    $('.professionFilter .current').removeClass('current'); 
    $(this).addClass('current'); 

    var selector = $(this).attr('data-filter'); 
    $container.isotope({ 
     filter: selector, 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     } 
    }); 
    return false; 
}); 
}); 

Позвольте мне знать, если вам нужна любая другая информация.

Спасибо.

EDIT: Я понял, что функция equalHeightColumns запущена, если второй раз щелкнуть ссылку.

ответ

0

Я понял: мне нужно было расширить контейнер Isotope после переключения записей - до настройки колонок. Таким образом, в функции, я добавил

$container.isotope('reLayout'); 

.equalHeightColumns(); перед вызовом