CODEWITHSUNDEEP
javascriptjquerycss
2ne
2ne

Reputation: 5976

How to make jQuery add css dynamaically on window resize

I am currently horizontally and vertically aligning a div. Its width and height varies depending on its childrens sizes. I am using this code to do that successfully.

$('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

I would like it to continue to work when the page window is resized as it currently does not. Any help would be great. Thanks

With your help I have got it working. Is this the best way to lay the code out?

<script>
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

    $(window).resize(function() {
        $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});
    });
</script>

Upvotes: 0

Views: 350

Answers (1)

jamis0n
jamis0n

Reputation: 3800

Have you tried using the jQuery window resize function, $(window).resize(function() {} ); ? Anything in this function is called whenever the page is resized:

$(window).resize(function() {
    $('.tiles-wrapper').css({top:'50%',left:'50%',margin:'-'+($('.tiles-wrapper').height() / 2)+'px 0 0 -'+($('.tiles-wrapper').width() / 2)+'px'});

});

You can also call this function manually via $(window).resize();

Upvotes: 2

Related Questions