Динамическое обновление высоты и поля с помощью jQuery при изменении размера

Question

Мне интересно, возможно ли это. Я создал несколько строк JQuery для извлечения высоты каждого конкретного DIV на странице и отрицательный верхний крае этого, так что я могу сосредоточить свои дивы на экране (стандартный метод (http://goo.gl/R6HfF))

$(window).load(function() { 
    $('.each-web-project-info > div').each(function() { 
     eachWebProjectInfoHeight = $(this).height(); 
     $(this).css('height',eachWebProjectInfoHeight+'px'); 
     $(this).parent().css('margin-top',-eachWebProjectInfoHeight -35+'px'); 
    }); 
}); 

Рамка Я создаю отзывчивый, поэтому ширина div устанавливается в процентах (50%) с -25% по левому краю. Таким образом, по мере того, как экран масштабируется, положение div не будет центрироваться как по вертикали, так и по горизонтали.

Итак, с этим фоном то, что я хочу сделать, это изменить мой код, чтобы он извлекал высоту каждого div и применял его к краю сверху как отрицательный при изменении размера.

Любая помощь будет оценена, -R

Answer 1

Вам просто нужно связать обновление DIVS наценки к событию окно повторно размер. Что-то вроде этого:

$(function() { 

    updateDivsMargins(); 
    $(window).resize(updateDivsMargins); 

    function updateDivsMargins() { 
     $('div.centered').each(function() { 
      $(this).css({ 
       'margin-top': (-$(this).height()/2), 
       'margin-left': (-$(this).width()/2) 
      }); 
     }); 
    } 

}); 

Рабочая скрипку: http://jsfiddle.net/DpBky/5/