मैं सोच रहा हूँ कैसे js बेला का आकार बदलने के विषय में उनके textareas और उनके layot ​​

Question

से निपटने है मुझे आश्चर्य है कि कैसे साइट jsfiddle.net उनके textareas से निपटने है। जब आप एक का आकार बदलते हैं, तो दूसरे लोग आकार कम करते हैं। मैं इसे नियमित रूप से सीएसएस के साथ करने की कोशिश कर रहा हूं लेकिन जब मैं एक का आकार बदलता हूं, तो दूसरा टेक्स्टरेरा पहले टेक्स्टरेरा के नीचे पॉप करता है। कुछ इस तरह।

|[ ][ ]| 
resize work.... 
|[  ] | 
[] 

तो अन्य टेक्स्टरेरा नीचे चला जाता है। द होमपेज के पक्ष होने के लिए मानसिक हैं और [] textareas हैं।

Answer 1

मैं क्रोम निरीक्षक के साथ देख सकते हैं, वे पहले दो कॉलम में, स्थिति के साथ अलग होती है: पूर्ण। बायीं तरफ एक "बाएं" सीएसएस संपत्ति सेट के साथ, और दाईं ओर एक "दाएं" सीएसएस संपत्ति सेट के साथ।

फिर प्रत्येक कॉलम दो पंक्तियों, कि (सेट ऊपर और नीचे सीएसएस गुणों के साथ) एक ही विधि, दूसरी तरह के आसपास का उपयोग करें।

फिर जावास्क्रिप्ट में आता है। जब संभाल घसीटा है, प्रत्येक स्तंभ या पंक्ति युगल की ऊंचाई या चौड़ाई एक ही राशि देने के लिए बदल रहे हैं।

संपादित करें: यहां आप jsfiddle से कुछ जावास्क्रिप्ट देख सकते हैं।

onDrag_horizontal एक कॉलम की दो पंक्तियों के आकार बदलता है। इसे संभाल घंटा (var top = (h.getPosition(this.content).y + h.getHeight()/2)/this.content.getHeight() * 100;) की स्थिति लेता है और फिर दो पंक्तियों की ऊंचाई सेट तदनुसार

var onDrag_horizontal = function(h) { 
    var windows = h.getParent().getElements('.window'); 
    var top = (h.getPosition(this.content).y + h.getHeight()/2)/this.content.getHeight() * 100; 
    windows[0].setStyle('height', top + '%'); 
    windows[1].setStyle('height', 100 - top + '%'); 
}.bind(this); 

onDrag_vertical एक ही बात करता है, लेकिन खड़ी संभाल, जो दो स्तंभों का आकार बदलता है साथ

var onDrag_vertical = function(h) { 
    var left = (h.getPosition(this.content).x + h.getWidth()/2)/this.content.getWidth() * 100; 
    this.columns[0].setStyle('width', left + '%'); 
    this.columns[1].setStyle('width', 100 - left + '%'); 
}.bind(this); 

Answer 2

मुझे लगता है कि मैं अब इसे हल करने के लिए आपकी मदद के साथ कर रहा हूँ, मैं रिश्तेदार की स्थिति का उपयोग कर रहा था और मैं चाहिए पूर्ण उपयोग किया गया है ताकि पाठ क्षेत्र नीचे कूद नहीं है। मैं jQuery के आकार बदलने योग्य यूई का उपयोग कर रहा हूं क्योंकि ऐसा लगता है कि मूल जावास्क्रिप्ट में ऑन्रेसिज अन्य तत्वों, बस खिड़की पर लागू नहीं होता है।

मूल रूप से

छोड़ दिया पाठ क्षेत्र आकार बदलने योग्य बनाने के लिए और घटना 'का आकार परिवर्तन' है कि जब भी यह आकार बदलने योग्य है, अन्य textareas के आयामों की तरह बदलने के लिए जोड़ने के लिए,

$('#rightBox').css('width', totalsize + (ui.originalSize.width - ui.size.width)); 
$('#rightBox').css('height', totalsize + (ui.originalSize.height- ui.size.height));