Блог

У меня есть наложение jquery поверх div. Это работает довольно хорошо, за исключением того, что, когда я расширяю и сжимаю окно, оверлей не расширяется и не сжимается вместе с ним. Он будет расширяться и сжиматься, как только я обновлю страницу, но он не будет делать это динамически. У меня там есть некоторый код, который, как я надеялся, решит проблему. К сожалению, этого не произошло. Вот что у меня есть на данный момент…

 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();
    });
}
  

Я продолжу просматривать Интернет в поисках предложений. Спасибо за вашу помощь.

Это может немного замедлить работу в ie, если применить это ко многим элементам, но я использую событие $ (window).resize, когда мне нужно что-то изменить в зависимости от размера окна, и это угрожает стать головной болью.

Пример :

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

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

задайте нижний и правый, а не ширину и высоту в css (если позволяет дизайн). Это заставит окно сохранять надлежащие расстояния от краев независимо от того, какой у вас дизайн.

Если вы хотите, чтобы он не становился меньше определенного размера, убедитесь, что элемент также имеет минимальную высоту и минимальную ширину.