How to add min-height and min-width to jQuery .width and .height
I have a single page site and am trying to set the min-height and width using CSS. But the jQuery seems to ignore my min 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 is positioned off 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 greatly recieved.
Answer
Value that is greatest will be rendered (height > min-height or vice-versa)
So if you are designing your web-page then keep this think in mind.
1.with greater min-height and 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>2.with greater height and 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>