Question

I am using jquery to place an overlay over a div while I am waiting for my server to return to my a json table that I automatically over to (there are two tabs, when you do an ajax post on one, a table is created using JSON data from the server response).

That seems to be working just fine.
However, when I resize my screen, the overlay stays the same size.
That is no good.

That overlay div needs to resize when someone shrinks or expands the window.
I have tried a couple of different things, including posting here to stack overflow.

Also, I tried to attach the size of my div overlay to a $(window).resize function inside of my overlay function.

Basically setting the top, left, width and height css attributes to the div.outerWidth(), outerHeight(), left, top properties.

That doesn’t seem to work.

Any ideas?

CODE for what I Do

        $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo('body');

As you can see, I pretty much do all of my css work inside of a javascript function. I guess I could do all of css stuff in a style sheet like you guys suggest and just append and hide my div to the DOM. I will give it a try.

Answer 1

Good Answers fellow stack Overflow enthusiasts. I recently solved the problem by simply attaching the overlay to the correct div instead of trying to overlay it over that div and then calculate the size… Here is what I did. There is a subtle change that i will point out.

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.outerWidth(),
        height : $div.outerHeight(),
        background: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByMRN", "PatientACO")%>', srlzdform, function (data) 
    {                   
        DisplayDemographicSearch(data);
        $("#overlay").fadeOut('slow', function () {
             $("#overlay").remove();
        });
    });
}

Previously, I attached the overlay div to ‘body’. Now I attach it to the div that I previously grabbed… $div… I have know idea why that worked, but the overlay now grows and shrinks with the window size. Any insight into that guys? It would be great to not only have solved this problem, but I would like to learn why the problem was solved as well so I can make a more informed decision next time. Thanks for all of your comments.