Question

I have a jquery Overlay over a div. It works pretty well, except, when I expand and contract the window the overlay doesn’t expand and contract with it. It will expand and contract once I refresh the page, but It won’t do it dynamically. I have some code in there that I had hoped would solve the problem. Unfortunately it did not. Here is what I have currently…

function DemoSearchInternals()
{
    debugger;
    var form = $("#DemoGraphID");
    $div = $("#thatTable");
    //$loading = $('<img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon" style="display:none" id="img-load">');
    //$div.append($loading);
    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: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo('body');
    $(window).resize(function(){
    //$div = $("#thatTable");
    $('<div id="overlay">').css({
            top: $div.offset().top,
            left: $div.offset().left,
            width: $div.outerWidth(),
            height: $div.outerHeight()
        }).appendTo('body');
    });

    //$('div#TabView1').html('<div id="overlay"><img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon"></div>');
    //div.append('<img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon">');
    //$loading.show();

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

I will continue to peruse the internet to look for suggestions. Thank you for your help.

Answer 1

It may slow down things a little on ie if you apply that to many elements, but I use the $(window).resize event when I need something to resize depending on the window size and it’s threatening to become a headache.

Ex :

function setSize() {
    //Your code and everything affecting the resize depending on window width goes here
    //Exemple : 
    $("#mydiv").width($(window).width);
}

$(window).resize(function() {
    setSize();
});