【发布时间】：2009-11-17 14:42:25
【问题描述】：
目前，我有这个 DIV，其注册表单位于页面中心。 DIV 的内容来自 ascx 页面。这做得很好。 现在，如果用户尝试填写一个不唯一的名称，一些 jQuery 会在用户名字段旁边添加一条错误消息。这打破了 DIV 的布局，因为现在的内容比以前更宽了。 所以我用谷歌搜索了这个，但我找不到解决方案。
谁能帮我找到一个很好的方法来做到这一点（伪 HTML/js）：
<div id="myCenteredDiv" onChangeContents="resizeToNewSize()">
<!-- div contents -->
</div>
<script type="text/javascript">
function resizeToNewSize() {
$("#myCenteredDiv").animateToSize($("#myCenteredDiv").contentWidth,
$("#myCenteredDiv").contentHeight);
}
</script>
我正在寻找“onChangeContents”方法（和/或事件）和“div.contentWidth”属性。
非常感谢您帮助我！
更新：试图更清楚地解释问题
假设我有这个 DIV：
<div id="myDiv">
<form ...>
Enter your name: <input id="txtYourName" type="text" name="YourName" value="" />
<span id="errorYourName"></span>
<input type="submit" ... />
</form>
</div>
假设我有这个 jQuery 的 sn-p：
$(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.");
}
});
});
...其中validateInput(value) 返回true 以获得有效值。
现在好了。 SimpleModal 插件获取 div 并将其放置在页面的中心，具有一定的宽度和高度，它以某种方式从 div 的内容中读取。所以 div 不会比输入框宽，因为 span 目前是空的。
当输入框失去焦点时，会在 span 中放入一条错误消息。这会破坏 div 的布局。
我可以将代码放入entry 1 中，当错误消息被清除后，用动画将 div 的大小重新调整为某种大小，然后将代码放入entry 2 中，将 div 的大小调整为更大的大小，以便错误消息适合.
但我最想要的是一种方法来判断 div 中的内容是否已更改，并相应地以动画方式自动适应 div。
有什么想法吗？再次感谢。
【问题讨论】：
-
你试过设置css mid-width属性而不是width属性吗？
-
这个 div 是否被另一个固定宽度的 div 包围？
-
DIV 的样式如何？是否使用固定尺寸？
-
我正在使用 SimpleModal jQuery 插件。不确定它是否使用固定的 div，但我可以很好地使用 animate() 调整它的大小。
标签： javascript jquery dom resize