CODEWITHSUNDEEP
jqueryresize
John the Painter
John the Painter

Reputation: 2615

Dynamically update height and margin using jQuery on resize

I'm wondering if this is possible. I have set up a few lines of jQuery to fetch the height of each specific div on a page and negative top margin this so I can center my divs on screen (a standard method (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');
    });
});

The framework I'm building is responsive, so the width of the div is set in percentages (50%) with a -25% margin-left. So, as the screen scales, the position of the div won't be centered both vertically and horizontally.

So, with that background, what I'm looking to do is alter my code so it fetches the height of each div and applies it to the margin-top as a negative on resize.

Any help would be appreciated, -R

Upvotes: 0

Views: 6695

Answers (1)

Thomas C. G. de Vilhena
Thomas C. G. de Vilhena

Reputation: 14595

You just need to bind the divs margins update to the window re-size event. Something like this:

$(function () {

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

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

});

Working fiddle: http://jsfiddle.net/DpBky/5/

Upvotes: 3

Related Questions