Larghezza in percentuale non funzionante dopo il ridimensionamento jQuery è padre

Question

Ho un div che voglio essere larghezza 100% della sua finestra di dialogo padre.

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

Dovrebbe questa proprietà se io ridimensionare manualmente la finestra di dialogo, tuttavia il ridimensionamento dopo manualmente, se io uso l'animate() nella finestra di dialogo, manterrà la larghezza vecchio ridimensionata.

Lo stesso vale per l'altezza.

HERE è un buon jsFiddle che spiega meglio il problema.

Come posso avere il div mantenendo le sue proporzioni?

In che modo jQuery aggiorna la larghezza e l'altezza (quando ridimensiono manualmente) mantenendo le proporzioni?

EDIT:

---

ho voluto lo sfondo grigio da riempiendo l'intera finestra di dialogo non importa quale. Qui è la mia jsfiddle aggiornato dimostrando in questo modo: http://jsfiddle.net/Esh5h/1/

EDIT 2:

---

ho trovato un modo funzionale, ma molto brutto di compiere esso: JSFIDDLE

Il trucco è il ridimensionamento sia il dialogo e la sua .children(".ui-dialog-content")

EDIT 3:

---

Non riesco a replicare esattamente la stessa funzione utilizzata da jQuery per ridimensionarlo?

Answer 1

L'ho guardato di nuovo e ispezionando gli elementi è ora chiaro per me cosa sta succedendo.

Non appena si manualmente ridimensionare la finestra di jQuery inietta un attributo style con valori fissi, in modo simile a questo:

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

Poi, quando si animano lo stile interferire con il risultato desiderato.

Rimozione l'attributo style prima di animare sembra funzionare, simile a questo:

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

---

DEMO - Moving left e top al fondo

---

Modifica

che l'attributo style continuerà a darti problemi.Dopo averlo rimosso, quando poi di nuovo ridimensionare manualmente lo inietta nuovamente, facendo confusione con i risultati attesi.

L'unico modo che ho trovato per aggirare questo è quello di tenerli remivng il ridimensionamento:

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

Modifica

volevo lo sfondo grigio da riempire tutta la finestra di dialogo non importa cosa.

Questo sembra essere un problema con il selettore CSS.

Modifica questo:

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

a questo:

.ui-dialog { 
    background : #cacaca; 
} 

Inoltre si ha ancora il problema che lo stile iniettato attributi volontà rovinare gli stili previsti e utilizzando il codice che togliere di cui sopra l'attributo style su re-size e anche quando si animano correzioni.

---

DEMO - Sfondo grigio riempie dialogo e attributo di stile iniettato rimosso in ogni momento

DEMO - Come sopra, ma senza la empty-container elemento

---

Answer 2

A meno che non si sta cercando di realizzare qualcosa a parte il semplice spostamento e ridimensionamento della finestra di dialogo, non penso che sia necessario reinizializzare la finestra di dialogo sull'evento click. Nota come l'interfaccia utente di jQuery avvolge il tuo div originale in un paio di nuove div, quindi sto afferrando l'elemento più esterno. Prova a fare qualcosa di simile nel Javascript:

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

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

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

}); 

Answer 3

animate({complete:function()}) è la soluzione. this jsfiddle ora funziona.

Non so perché, ma funziona correttamente al secondo clic, ma non al primo. this example con un setTimeout() funziona (con un piccolo ritardo).

Answer 4

È possibile aggiungere un callback per la funzione di animare:

$("#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