Làm cách nào để tự động thay đổi kích thước div thành kích thước nội dung của nó khi nội dung của div đã thay đổi?

Question

Hiện tại, tôi có DIV này với biểu mẫu đăng ký ở giữa trang. Nội dung của DIV đến từ một trang ascx. Điều này được thực hiện độc đáo. Bây giờ, nếu người dùng cố gắng điền vào một tên không phải là duy nhất, một thông báo lỗi được thêm vào bởi một số jQuery bên cạnh trường tên người dùng. Điều này phá vỡ bố trí của DIV, vì các nội dung hiện nay rộng hơn so với trước đây. Vì vậy, tôi đã googled theo cách của tôi vào này, nhưng tôi không thể tìm thấy một giải pháp cho việc này.

bất cứ ai có thể giúp tôi tìm ra một cách tốt đẹp để làm điều này (giả HTML/js):

<div id="myCenteredDiv" onChangeContents="resizeToNewSize()"> 
    <!-- div contents --> 
</div> 

<script type="text/javascript"> 
    function resizeToNewSize() { 
    $("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth, 
     $("#myCenteredDiv").contentHeight); 
    } 
</script> 

Tôi đang tìm kiếm các phương pháp "onChangeContents" (và/hoặc sự kiện) và "div. contentWidth "thuộc tính.

Cảm ơn rất nhiều vì đã giúp tôi!

update: cố gắng để giải thích vấn đề rõ ràng hơn

Hãy nói rằng tôi có DIV này:

<div id="myDiv"> 
    <form ...> 
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" /> 
    <span id="errorYourName"></span> 
    <input type="submit" ... /> 
    </form> 
</div> 

Và chúng ta hãy nói rằng tôi có đoạn này của jQuery:

$(document).ready(function() { 
    $("#txtYourName").live("blur", function() { 
    if (validateInput($("#txtYourName").val())) { 
     $("#errorYourName").html(""); 
     // entry 1 
    } else { 
     // entry 2 
     $("#errorYourName").html("This name is not valid."); 
    } 
    }); 
}); 

... trong đó validateInput(value) trả lại true để có giá trị hợp lệ.

Tốt ngay bây giờ. Plugin SimpleModal lấy div và đặt nó ở giữa trang, với chiều rộng và chiều cao nhất định, bằng cách nào đó nó đọc hết nội dung của div. Vì vậy, div không phải là rộng hơn so với hộp đầu vào, kể từ khi khoảng trống là vào lúc này.

Khi hộp nhập liệu bị mất tiêu điểm, thông báo lỗi được đưa vào khoảng. Điều này sau đó phá vỡ bố cục của div.

Tôi có thể đặt mã vào entry 1 để thay đổi kích thước div trở lại bằng một kích thước khi thông báo lỗi đã bị xóa và mã thành entry 2 thay đổi kích thước div thành kích thước lớn hơn để thông báo lỗi phù hợp.

Nhưng điều tôi thích nhất là cách để biết nội dung trong div có thay đổi không và phù hợp với div tương ứng, hoạt ảnh và tự động.

Bất kỳ ý tưởng nào? Cảm ơn một lần nữa.

Answer 1

Tôi chưa bao giờ sử dụng SimpleModal, nhưng từ các ví dụ trên trang web của họ, có vẻ như bạn có thể đặt CSS vùng chứa. Nếu bạn muốn chiều cao để điều chỉnh, hãy thử thiết lập chiều cao auto

$("#sample").modal({ 
containerCss:{ 
    backgroundColor:"#fff", 
    borderColor:"#0063dc", 
    height:450, 
    padding:0, 
    width:830 
} 
}); 

Mặc dù ví dụ không có nó, tôi nghĩ rằng bạn cần phải thêm px sau khi chiều cao và chiều rộng trong dấu ngoặc kép (ví dụ "450px") .

---

Ok đây là một ý tưởng khác. Có thể đây là quá nhiều nhưng thêm trường nhập ẩn:

<div id="myDiv"> 
    <form ...> 
    Enter your name: <input id="txtYourName" type="text" name="YourName" value="" /> 
    <span id="errorYourName"></span> 
    <input type="submit" ... /> 
    <input id="updated" type="hidden" /> 
    </form> 
</div> 

sau đó đính kèm sự kiện thay đổi được kích hoạt cùng lúc bạn cập nhật thông báo lỗi.

$(document).ready(function() { 
    $("#txtYourName").live("blur", function() { 
    if (validateInput($("#txtYourName").val())) { 
     $("#errorYourName").html(""); 
     // entry 1 
    } else { 
     // entry 2 
     $("#errorYourName").html("This name is not valid."); 
     $("#updated").trigger('change'); 
    } 
    }); 
    $("#updated").change(function(){ 
    // resize the modal window & reposition it 
    }) 
}); 

Điều này chưa được kiểm tra và có thể sẽ bị quá tải, nhưng tôi không thấy chức năng cập nhật trong SimpleModal.

---

Cập nhật: Xin lỗi tôi đã tìm ra rằng mờ không được hỗ trợ với sự kiện trực tiếp. Vì vậy, tôi đã làm một số thử nghiệm thêm và đã đưa ra một bản demo làm việc. Tôi đã đăng nó trong this pastebin (bỏ qua mã đơn giản được bao gồm ở dưới cùng). Đây là đoạn mã cần thiết

CSS

#myDiv { line-Height: 25px; } 
#simplemodal-container { background-color:#444; border:8px solid #777; padding: 12px; } 
.simplemodal-wrap { overflow: hidden !important; } 
.error { color: #f00; display: none; } 
input { float: right; } 

HTML

<div id="myDiv"> 
    <form> 
    What is your name: <input id="txtYourName" type="text" name="YourName" value="" /><br> 
    <div id="errorYourName" class="error">This name isn't Arthur.</div> 

    What is your quest: <input id="txtYourQuest" type="text" name="YourQuest" value="" /><br> 
    <div id="errorYourQuest" class="error">This quest must be for the Grail.</div> 

    What is your favorite color: <input id="txtYourColor" type="text" name="YourColor" value="" /><br> 
    <div id="errorYourColor" class="error">Sorry, you must like red or blue.</div> 

    What is the air speed velocity of an unladen swallow:<br> 
    Type: 
    <select> 
    <option>African</option> 
    <option>European</option> 
    </select> 
    <input id="txtYourGuess" type="text" name="YourGuess" value="" /><br> 
    <div id="errorYourGuess" class="error">This guess stinks.</div> 
    <hr> 
    <input id="submitMe" type="submit" /> 
    </form> 
</div> 

Script

$(document).ready(function(){ 
    $("#myDiv").modal({ 
    containerCss:{ 
    height: '165px', 
    width: '350px' 
    } 
}) 
$("#txtYourName").focus(); 

addValidate('#txtYourName','Arthur','#errorYourName'); 
addValidate('#txtYourQuest','Grail|grail','#errorYourQuest'); 
addValidate('#txtYourColor','red|blue','#errorYourColor'); 
addValidate('#txtYourGuess','11|24','#errorYourGuess'); // See http://www.style.org/unladenswallow/ ;) 

    $("#myDiv form").change(function() { 
    // This is called if there are any changes to the form... added here for an example 
    // alert('Form change detected'); 
    }); 
}) 
function addValidate(el,valid,err){ 
$(el).blur(function() { 
    if ($(el).val().length > 0 && !$(el).val().match(valid)) { 
    if ($(err).is(':hidden')) { 
    $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() + 25) + 'px'},1000); 
    $(err).slideDown(1000); 
    } 
    } else { 
    // entry 2 
    if ($(err).is(':visible')) { 
    $('#simplemodal-container').animate({'height': ($('#simplemodal-container').height() - 25) + 'px'},1000); 
    $(err).slideUp(1000); 
    } 
    } 
}); 
} 

Answer 2

Jquery:

$(document).ready(function() { 

var originalFontSize = 12; 

var sectionWidth = $('#sidebar').width(); 



$('#sidebar span').each(function(){ 

    var spanWidth = $(this).width(); 

    var newFontSize = (sectionWidth/spanWidth) * originalFontSize; 

    $(this).css({"font-size" : newFontSize, "line-height" : newFontSize/1.2 + "px"}); 

}); 

}); 

</script> 

div:

<div id="sidebar"> 

<span>fits the width of the parent</span><br /> 

<span>Hello</span><br /> 

<span>my</span><br /> 

<span>name</span><br /> 

<span>is</span><br /> 

<span>john</span><br /> 

<span>1</span><br /> 

<span>23</span><br /> 

<span>456</span><br /> 

<span>12345678910</span><br /> 

<span>the font size in the span adjusts to the width</span><br /> 

</id> 

preview http://jbdes.net/dev/js/fontsize.html

Answer 3

bảng thời Cũ là (vẫn) tuyệt vời tại trung thứ, nhanh chóng, chất lỏng và mã miễn phí.

<table width=100% height=100%><tr><td align=center valign=center> 
    <table><tr><td style="yourStyle"> 
     your Content 
    </td></tr></table> 
</td></tr></tabĺe> 

CSS: HTML,BODY {height:100%; width:100%}