Geek asks and answers

Percent width not working after jQuery resize

I have a div, which should be 100% the width of its parent dialog.

#content {
    width: 100%;
    color:white;
    background: red;
}

This should be this property if I manually resize the dialog box, however after manually resizing, if I use animate()in the dialog box, it will keep the width of the old size.

The same applies to height.

HERE is a good jsFiddle that better explains the problem.

How can I keep the div in proportion?

How does jQuery update width and height (when resizing manually) while maintaining aspect ratio?

EDIT:

I wanted the gray background to fill the entire dialog no matter what. Here is my updated jsfiddle demonstrating this: http://jsfiddle.net/Esh5h/1/

EDIT 2:

, : JSFIDDLE

.children(".ui-dialog-content")

3:

, jQuery ?

+5
4

, , .

, jQuery style , :

<div id="dialog" style="width: 376px; min-height: 99px; height: 282px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
</div>

, , .

style , , , :

$("#content").click(function () {
    $("#dialog").attr("style", "").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150);
});

DEMO - left top

Edit

style . , , , .

, , , - :

$("#dialog").on("dialogresize", function(){
    $(this).attr("style", "");
});

Edit

, , .

CSS.

:

.ui-dialog .ui-dialog-content {
    background : #cacaca;
}

:

.ui-dialog {
    background : #cacaca;
}

, , , , .

DEMO - ,

DEMO - , , empty-container

+5

- , , , . , jQuery div div, . - Javascript:

$("#dialog").dialog();

$("#content").click(function () {

    $(".ui-dialog").animate({
        left: 0,
        top: 0,
        width: $(document).width() -100,
        height: $(document).height() -100
    }, 150);

});
0

animate({complete:function()}) . jsfiddle .

, , , . setTimeout() ( ).

0

:

$("#content").click(function () {
    $("#dialog").dialog("widget").animate({
        width: $(document).width() -100,
        height: $(document).height() -100,
        left: 0,
        top: 0
    }, 150, function() { 
        $("#dialog").width($('.ui-dialog').width()); 
    });
});

JsFiddle Demo

0
source

More articles:


All Articles