Создание Высота Пересчитать на изменение размера

Question

СМ CODEPEN ДЛЯ CLARITY: http://codepen.io/geochanto/pen/LGNWML

var maxHeight = 0; 

$('li a').each(function() { 
    maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight(); 
    var linkHeight = $(this).outerHeight(); 
    var halfLinkHeight = parseInt(linkHeight/-2); 
    $(this). css({ 
    'margin-top' : halfLinkHeight, 
    'height' : maxHeight 
    }); 
}); 

$("li").css("height", maxHeight); 

Так я этот код, который вычисляет высоту ссылок, а затем делает их все высота самого высокого один, и добавляет некоторый отрицательный запас на сверху для вертикального выравнивания по середине их всех внутри своих соответствующих родителей. Все работает так, как я хочу, за исключением того, что я пытался получить эту высоту до пересчитать и применить к <li> и <a> при изменении размера окна с различными способами, но никто не работал.

Я пробовал это, но, возможно, мой синтаксис был неправ, ИДК:

1. How to create a jQuery function (a new jQuery method or plugin)?
2. Run Jquery function on window events: load, resize, and scroll?
3. How to call a function in jQuery on window resize?

Answer 1

Я получил это работает для вас здесь: http://codepen.io/anon/pen/RraVZE

Потребовались некоторые изменения в y наш css и ваш javascript.

Я снял абсолютное позиционирование с вашего тега:

a { 
    display: block; 
    padding: 10px; 
    margin-left: 50px; 
    font-size: 16px; 
    line-height: 1.2; 
    font-family: "montserrat", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
    color: #193170; 
    text-decoration: none; 
    word-wrap: break-word; 
} 

И Изменив JavaScript:

$(document).ready(function() { 

    var maxHeight = 0; 

    function calculateHeight() { 
    $('li a').each(function() { 
     maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight(); 
    }); 
    $("li").css("height", maxHeight); 
    centerText(); 
    } 

    function centerText() { 
    $('li a').each(function() { 
     var linkHeight = $(this).outerHeight(); 
     var halfLinkHeight = parseInt((maxHeight - linkHeight)/2); 
     $(this).css('margin-top', halfLinkHeight); 
    }); 
    } 

    $(window).resize(function() { 
    calculateHeight(); 
    }); 

    calculateHeight(); 

});