Geek asks and answers

How to add min-height and min-width to jQuery.width and .height

I have a single page website and am trying to set the minimum height and width using CSS. But jQuery seems to ignore my minimum sizes.

I am resizing my window using this:

$(window).resize(function () {
    resizePanel();
});
function resizePanel() {
    width = $(window).width();
    height = $(window).height();
    mask_width = width * $('.item').length;
    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
}

The html looks like this.

</head>
<body>


<div id="wrapper">
<div id="mask">

    <div id="item1" class="item">
    </div>

    <div id="item2" class="item">
    </div>

    <div id="item3" class="item">
    </div>

    <div id="item4" class="item">
    </div>

</div>
</div>

</body>
</html>

each of these divs fits off the screen using this CSS.

body, html {
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
background-color:#ccc;
overflow:hidden;
}

#mask {
    width:400%;
    height:100%;
    background-color:#eee;
}

.item {
    width:25%;
    height:100%;
    float:left;
    background-color:#ddd;
    min-height:700px;
    min-width: 700px;
}

Any ideas would be very helpful.

+5
source share
2 answers

JQuery actually overwrite your min-widthand min-heighton width, and heightso that you can do this:

$(window).resize(function () {
    resizePanel();
});
function resizePanel() {
    width = $(window).width();
    height = $(window).height();
    mask_width = width * $('.item').length;
    $('#wrapper').css({width: width, height: height});
    $('.item').css({minWidth: width, minHeight: height});
    $('#mask').css({width: mask_width, height: height});
}
0
source

The highest value will be displayed (altitude> minimum height or vice versa)

So, if you are designing your web page, think about it.

1. min-height min-width

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid #4CAF50;
    min-height:200px;
    min-width: 200px;
    height:50px;
    width:50px;    
}
</style>
</head>
<body>
<div>This element has greater min-height and min-width.</div>
</body>
</html>
Hide result

2. height width

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 1px solid #4CAF50;
    min-height:50px;
    min-width: 50px;
    height:100px;
    width:100px;    
}
</style>
</head>
<body>
<div>This element has greater height and width</div>
</body>
</html>
Hide result
0

More articles:


All Articles