CODEWITHSUNDEEP
javascriptjqueryhtml
Andrew
Andrew

Reputation: 2985

jquery resize div when min/max width matches certain width

how do I re-size a div gradually to 0 if as window width is under x px or %, and back to max-width when window bigger than x px or % ?

Upvotes: 1

Views: 2186

Answers (2)

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

Run this example on full page.

Adding a resizeTimer to provide a little bit of time lapse before firing the resize event. 

var resizeTimer;

$(window).on('resize',function(){
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function(){
        $("#theDiv").height($(window).height()/5);//calculation for height here as required
    }, 200);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="theDiv" style="background-color: yellow; border: 1px solid black; height: 100px"></div>

Upvotes: 0

PBLC
PBLC

Reputation: 259

This would normally be done with CSS, using a CSS transition property, and then using jQuery's addClass

CSS 

#myElementToResize{
    width: 100px;
    -webkit-transition: width 2s;
    transition: width 2s;
}
.minimized{
    width: 0px;
}

JS

$(window).resize(function(){
    if ( $(window).width() <= 768 ){
        $("#myElementToResize").addClass("minimized");
    } else {
        $("#myElementToResize").removeClass("minimized");
    }
})

Upvotes: 2

Related Questions