CODEWITHSUNDEEP
javascriptjqueryhtml
codek
codek

Reputation: 343

Div resize on window resize

The problem I have is that when the content is loaded, all 5 divs fit well but when I resize the window the size of the containers doesn´t fit anymore to the layout.

To make the layout i´m using isotope and this script to fit the images to the .small_box divs:

    // fittocontainer
    jQuery.fn.fittocontainer =
    function(){
        var div = this.parent();
        var img = this;
        var imAR = img.attr("height") / img.attr("width");
        var bgAR = div.height() / div.width();
        if(imAR >= bgAR){
            img.attr("width" , div.width());
            img.attr("height" , div.width() * imAR);
        }else{
            img.attr("height" , div.height());
            img.attr("width" , div.height() / imAR);
        }
        div.css({
            "overflow" : "hidden"
        });
        img.css({
            "left" : (div.width() - img.attr("width"))/2,
            "top" : (div.height() - img.attr("height"))/2
        });
        img.fadeIn();
    };

and this CSS:

    .layout_container{
        width: 100%;
        overflow: hidden;
        height: 100%;
        position: absolute;
        top: 0;
        .layout{
            width: 103%;
            height: 100%;
            position: absolute !important;
            top: 0;
            left: 0;
            z-index: 1;
            overflow: hidden;
            min-height: 100%;
            max-height: 100%;
            margin-left: -0.5%;
            .small_box{
                width: 32%;
                overflow: hidden;
                height: 49%;
                margin-right: 1%;
                margin-bottom: 1%;
                &.large_h{
                    height: 100%;
                }
            }
            img{
                display: none;
            }
            iframe{
                width: 100%;
            }
        }
    }

Any idea how can I fix this?

Upvotes: 0

Views: 303

Answers (2)

PSR
PSR

Reputation: 40318

This might be the answer for u

http://www.stackoverflow.com/questions/2720310/resize-div-on-browser-resize

Upvotes: 0

Merec
Merec

Reputation: 2761

Add a resize event to the browser which do the math on the container again after the windows has been resized:

var globalResizeTimer = null;

$(window).resize(function() {
    if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
    globalResizeTimer = window.setTimeout(function() {
        $.fittocontainer();
    }, 200);
});

Upvotes: 1

Related Questions