Solved

jQuery resize event problem?!

Posted on 2015-01-20
2
199 Views
Last Modified: 2015-01-21
The code I enclose seems long, but it is really just repetitive. This resize event problem seems to happen in IE, Safari, and Chrome, but not with Mozilla and Opera.

When you run the code, you will see 4 divs, and there are buttons at the bottom of the screen to cover/uncover the respective divs. I am trying to use divs created with jQuery during runtime to cover up the 4 divs already on the screen. The covering div will have a dark hue so you can visually tell a div has been successfully covered or not.

To test my problem, do the following:

1) Press all the Cover Div 1, 2, 3, and 4 buttons to cover up all the four divs. They will all darken. Also notice that the ENTIRE div is covered from top to bottom without a single pixel out of sync.
2) Now maximize your browser, and restore it back to it's previous size. Notice now at the bottom of the covered divs, a portion is now showing instead of being covered up entirely like it originally was.

I've been pulling my hair trying to resolve this. Any help from anyone on how I can overcome this peculiar behavior across browsers would be greatly appreciated. Thanks!

<!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>

Open in new window

0
Comment
Question by:elepil
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40561776
When the cover divs are sized down, after the last one the document itself gets smaller (because the cover divs were 'sticking out' relative to the now smaller original divs). It's mainly because of the "100%" height. The second resize event is not triggered in all browsers. I tested in Safari and can give you a really ugly 'band-aid', if only to show what's going on:
                $(window).resize(function() {
                    var i = 0;
                    do {
                        console && console.log && console.log('resize phase ' + (++i));
                        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()
                        });
                    }
                    while (div1.height() != divCover1.height() && i < 3);
                });

Open in new window

However, this code will do a lot of unnecessary work in browsers that do already trigger the second resize event themselves. Have a look at the console logging to see how many times the loop gets executed (should be 2 + 1).

Is it an option for you to define the cover divs inside the existing divs? Then you don't need a resize event anymore. Note that I changed the style on the colored divs (could also change the class of course). They need position relative, if this is a problem maybe you can put a container div around them.
<!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() {
                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>");
                
                divCover1.css({
                    "position" : "absolute",
                    "background": "rgba(0, 0, 0, .6)",
                    "z-index" : "1",
                    "display" : "none",
                    "opacity" : "1",
                    "top" : 0,
                    "left" : 0,
                    "width" : "100%",
                    "height" : "100%"
                });
                divCover2.css({
                    "position" : "absolute",
                    "background": "rgba(0, 0, 0, .6)",
                    "z-index" : "1",
                    "display" : "none",
                    "opacity" : "1",
                    "top" : 0,
                    "left" : 0,
                    "width" : "100%",
                    "height" : "100%"
                });
                divCover3.css({
                    "position" : "absolute",
                    "background": "rgba(0, 0, 0, .6)",
                    "z-index" : "1",
                    "display" : "none",
                    "opacity" : "1",
                    "top" : 0,
                    "left" : 0,
                    "width" : "100%",
                    "height" : "100%"
                });
                divCover4.css({
                    "position" : "absolute",
                    "background": "rgba(0, 0, 0, .6)",
                    "z-index" : "1",
                    "display" : "none",
                    "opacity" : "1",
                    "top" : 0,
                    "left" : 0,
                    "width" : "100%",
                    "height" : "100%"
                });
                
                $("#div1").append(divCover1);
                $("#div2").append(divCover2);
                $("#div3").append(divCover3);
                $("#div4").append(divCover4);
                
                $("#btnShow1").click(function() {
                    divCover1.css({
                        "display" : "block"
                    });
                });
                $("#btnShow2").click(function() {
                    divCover2.css({
                        "display" : "block"
                    });
                });
                $("#btnShow3").click(function() {
                    divCover3.css({
                        "display" : "block"
                    });
                });
                $("#btnShow4").click(function() {
                    divCover4.css({
                        "display" : "block"
                    });
                });
                $("#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="top: 0; position: relative; background: red"><span>This is Div 1</span></div>
        <div id="div2" class="testDivs" style="top: 0; position: relative; background: blue"><span>This is Div 2</span></div>
        <div id="div3" class="testDivs" style="top: 0; position: relative; background: green"><span>This is Div 3</span></div>
        <div id="div4" class="testDivs" style="top: 0; position: relative; 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>

Open in new window

0
 

Author Closing Comment

by:elepil
ID: 40562111
Robert Schutt, thank you for responding.

What I'm doing is making a reusable constructor function of a "busy indicator". For example, imagine a screen with multiple sections that could change based on a user decision. When the user clicks a link/button to initiate a server call, a cover div would appear on top of the affected sections to:

1) display an animated gif that depicts that section is "busy" and is awaiting update;
2) prevents any user interaction in those sections (i.e., so that anything clickable can be disabled momentarily).

Just like the way you did, I originally thought I'd just add the cover divs inside the divs, but I departed from that idea because given that I'm trying to create a reusable function, I feared altering the hierarchy within the div might cause an unforeseen problem for the user, depending on what they're doing. So I decided to add the cover divs at the end of the body tag rather than inside the divs themselves; while this still alters the hierarchy of the DOM, I rarely see people needing a count or enumeration of child elements from the body tag level.

This clearly is either a jQuery bug, or a browser bug. Gus at the jQuery forum couldn't resolve it either. I will have to resort back to doing it the way I did, which is what you suggested. Thanks again for responding.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now