प्रतिशत में चौड़ाई jQuery के बाद काम नहीं कर रही है इसके माता-पिता का आकार बदलना

Question

मेरे पास एक div है जो मैं अपने मूल संवाद की 100% चौड़ाई बनना चाहता हूं।

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

यह इस संपत्ति अगर मैं मैन्युअल रूप से संवाद का आकार बदलने, तथापि मैन्युअल के बाद, आकार बदलने अगर मैं संवाद पर animate() उपयोग करें, यह पुराने आकार दिया चौड़ाई रखेंगे चाहिए।

वही ऊंचाई पर लागू होता है।

HERE एक अच्छा जेएसफ़िल्ड है जो समस्या को बेहतर ढंग से बताता है।

मेरे div को इसके अनुपात को कैसे रखा जा सकता है?

jQuery को अनुपात को बनाए रखने की चौड़ाई और ऊंचाई (जब मैं मैन्युअल रूप से आकार बदलता हूं) अद्यतन करता हूं?

संपादित करें:

---

मैं धूसर पृष्ठभूमि कोई बात नहीं क्या पूरे संवाद भरने करना चाहता था। यहाँ मेरी अद्यतन jsfiddle इस प्रदर्शन है: http://jsfiddle.net/Esh5h/1/

संपादित करें 2:

---

मैं इसे पूरा करने का एक कार्यात्मक लेकिन बहुत बदसूरत तरीका मिल गया है: JSFIDDLE

चाल है आकार बदलने दोनों संवाद और उसके .children(".ui-dialog-content")

संपादित करें 3:

---

क्या मैं बस उसी सटीक फ़ंक्शन को दोहराना नहीं चाहता जिसे jQuery इसका आकार बदलने के लिए उपयोग करता है?

Answer 1

मैंने इसे फिर से देखा और उन तत्वों का निरीक्षण किया जो अब मुझे स्पष्ट हो रहा है कि क्या हो रहा है।

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

तो फिर तुम यह जब चेतन शैली अपने इच्छित परिणाम के साथ हस्तक्षेप:

जैसे ही आप मैन्युअल रूप से पुनः आकार संवाद jQuery तय मूल्यों, इस के समान के साथ एक style विशेषता injects। नीचे

---

संपादित

को left और top बढ़ते -

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

---

DEMO:

style विशेषता निकाला जा रहा है इससे पहले कि आप चेतन काम करने, इस के समान लगता है

कि style विशेषता आपको समस्याएं जारी रखेगी।इसे हटाने के बाद, फिर फिर से मैन्युअल रूप से फिर से आकार देने से यह आपके अनुमानित परिणामों से गड़बड़ हो जाता है। पूरे संवाद कोई बात नहीं भरने के लिए

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

संपादित

मैं धूसर पृष्ठभूमि चाहता था:

एक ही रास्ता है कि मैं इस के आसपास पाने के लिए मिल गया आकार बदलने पर उन्हें remivng रखना है क्या।

यह आपके सीएसएस चयनकर्ता के साथ एक मुद्दा प्रतीत होता है।

बदलें इस:

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

इस के लिए

:

.ui-dialog { 
    background : #cacaca; 
} 

इसके अलावा आप अभी भी समस्या आ रही है कि इंजेक्शन शैली विशेषताओं इच्छा गंदगी अपने इच्छित शैली और का उपयोग करके उपरोक्त कोड जो हटाने का उल्लेख किया पुन: आकार के साथ-साथ जब आप एनिमेट करते हैं तो स्टाइल एट्रिब्यूट इसे ठीक करता है।

---

DEMO - ग्रे पृष्ठभूमि संवाद और इंजेक्शन शैली विशेषता हर समय

DEMO पर हटा दिया भरता है - लेकिन उपरोक्त के समान empty-container तत्व

---

Answer 2

बिना जब तक आप कुछ हासिल करने के लिए कोशिश कर रहे हैं संवाद को स्थानांतरित करने और आकार बदलने के अलावा, मुझे नहीं लगता कि आपको क्लिक ईवेंट पर संवाद को फिर से शुरू करने की आवश्यकता है। ध्यान दें कि कैसे jQuery यूआई आपके मूल div को दो नए divs में लपेटता है, इसलिए मैं बाहरी सबसे अधिक तत्व को पकड़ रहा हूं। अपने जावास्क्रिप्ट में ऐसा कुछ करने का प्रयास करें:

$("#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()}) समाधान है। this jsfiddle अब काम कर रहा है।

मुझे नहीं पता क्यों, लेकिन यह दूसरे क्लिक पर सही काम करता है, लेकिन पहले नहीं। this examplesetTimeout() काम करता है (थोड़ी देर के साथ)।

Answer 4

आप चेतन कार्य करने के लिए एक कॉलबैक जोड़ सकते हैं:

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