jQuery problem with resizing divs
The code may seem lengthy, but it really is just a bunch of repetitions. But the length is irrelevant, just pay attention to the resize event, which is defined first thing inside the ready() function of jQuery.
My test page displays 4 divs. My objective is to cover up these 4 divs with 4 other divs I created during runtime with jQuery and be able to survive any kind of browser resizing.
When the code is run, click the buttons labeled "Cover Div 1", "Cover Div 2", "Cover Div 3", and "Cover Div 4". You will see all 4 divs on the screen darken somewhat because the translucent divs I created with jQuery are now on top of them.
Now resize the browser. You will see those covering divs resizes fine. But now maximize the browser and then restore back to the original size. You will now see disparities where the covering divs are not covering the entire div anymore.
I don't know what's going on. Is this a bug in jQuery? Thanks.
--------------------------------------------------
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Resize Problem</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function() {
$(window).resize(function() {
divCover1.css({
"top" : div1.offset().top,
"left" : div1.offset().left,
"width" : div1.width(),
"height" : div1.height()
});
divCover2.css({
"top" : div2.offset().top,
"left" : div2.offset().left,
"width" : div2.width(),
"height" : div2.height()
});
divCover3.css({
"top" : div3.offset().top,
"left" : div3.offset().left,
"width" : div3.width(),
"height" : div3.height()
});
divCover4.css({
"top" : div4.offset().top,
"left" : div4.offset().left,
"width" : div4.width(),
"height" : div4.height()
});
});
var div1 = $("#div1");
var div2 = $("#div2");
var div3 = $("#div3");
var div4 = $("#div4");
var divCover1 = $("<div></div>");
var divCover2 = $("<div></div>");
var divCover3 = $("<div></div>");
var divCover4 = $("<div></div>");
$("body").append(divCover1);
$("body").append(divCover2);
$("body").append(divCover3);
$("body").append(divCover4);
divCover1.css({
"position" : "absolute",
"background": "rgba(0, 0, 0, .6)",
"z-index" : "1",
"display" : "none",
"opacity" : "1"
});
divCover2.css({
"position" : "absolute",
"background": "rgba(0, 0, 0, .6)",
"z-index" : "1",
"display" : "none",
"opacity" : "1"
});
divCover3.css({
"position" : "absolute",
"background": "rgba(0, 0, 0, .6)",
"z-index" : "1",
"display" : "none",
"opacity" : "1"
});
divCover4.css({
"position" : "absolute",
"background": "rgba(0, 0, 0, .6)",
"z-index" : "1",
"display" : "none",
"opacity" : "1"
});
$("#btnShow1").click(function() {
divCover1.css({
"display" : "block",
"top" : div1.offset().top,
"left" : div1.offset().left,
"width" : div1.width(),
"height" : div1.height()
});
});
$("#btnShow2").click(function() {
divCover2.css({
"display" : "block",
"top" : div2.offset().top,
"left" : div2.offset().left,
"width" : div2.width(),
"height" : div2.height()
});
});
$("#btnShow3").click(function() {
divCover3.css({
"display" : "block",
"top" : div3.offset().top,
"left" : div3.offset().left,
"width" : div3.width(),
"height" : div3.height()
});
});
$("#btnShow4").click(function() {
divCover4.css({
"display" : "block",
"top" : div4.offset().top,
"left" : div4.offset().left,
"width" : div4.width(),
"height" : div4.height()
});
});
$("#btnHide1").click(function() {
divCover1.css({
"display" : "none"
});
});
$("#btnHide2").click(function() {
divCover2.css({
"display" : "none"
});
});
$("#btnHide3").click(function() {
divCover3.css({
"display" : "none"
});
});
$("#btnHide4").click(function() {
divCover4.css({
"display" : "none"
});
});
});
</script>
<style>
html, body {
height: 100%;
}
.testDivs {
width: 23%;
height: 100%;
margin: 2px;
display: inline-block;
font-size: 2.5em;
text-align: center;
top: 50%;
font-weight: bold;
color: white;
font-family: sans-serif;
}
span {
position: relative;
top: 40%;
}
</style>
</head>
<body>
<div id="div1" class="testDivs" style="background: red"><span>This is Div 1</span></div>
<div id="div2" class="testDivs" style="background: blue"><span>This is Div 2</span></div>
<div id="div3" class="testDivs" style="background: green"><span>This is Div 3</span></div>
<div id="div4" class="testDivs" style="background: cyan"><span>This is Div 4</span></div>
<p/>
<input id="btnShow1" type="button" value="Cover Div 1"></input>
<input id="btnShow2" type="button" value="Cover Div 2"></input>
<input id="btnShow3" type="button" value="Cover Div 3"></input>
<input id="btnShow4" type="button" value="Cover Div 4"></input>
<input id="btnHide1" type="button" value="Uncover Div 1"></input>
<input id="btnHide2" type="button" value="Uncover Div 2"></input>
<input id="btnHide3" type="button" value="Uncover Div 3"></input>
<input id="btnHide4" type="button" value="Uncover Div 4"></input>
</body>
</html>
Topic Participants
elevight
jakecigar
jtara-jquery