Question

目前，我有这个DIV，注册表单位于页面中心。 DIV的内容来自ascx页面。这很好地完成了。现在，如果用户尝试填写不唯一的名称，则会在username字段旁边添加一些错误消息。这打破了DIV的布局，因为现在的内容比以前更宽。所以我用Google搜索了这个，但我找不到解决方案。

任何人都可以帮我找到一个很好的方法（伪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片段：

$(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不比输入框宽，因为此时跨度是空的。

当输入框失去焦点时，会在范围中输入错误消息。然后这会打破div的布局。

我可以将代码放入entry 1，在错误消息被清除时将动画调整为大小，然后将代码放入entry 2，将div的大小调整为更大的大小，以便错误信息适合。

但我最喜欢的方法是判断div中的内容是否已经改变，并相应地调整div，动画和自动。

有什么想法吗？再次感谢。

Answer 1

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>

预览 http://jbdes.net/dev/js/fontsize.html

Answer 2

我从未使用过SimpleModal，但是从他们网站上的示例来看，您可以设置容器CSS。如果要调整高度，请尝试将高度设置为auto

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

虽然示例没有，但我认为您需要在引号的高度和宽度之后添加px（例如"450px"）。

好的，这是另一个想法。也许这太多了，但添加一个隐藏的输入字段：

<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>

然后附加一个更改事件，该事件在您更新错误消息的同时触发。

$(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
  })
});

这是未经测试的，可能会过火，但我在SimpleModal中没有看到更新功能。

更新：抱歉，我发现直播活动不支持模糊。所以我做了一些进一步的测试，并提出了一个工作演示。我在this pastebin中发布了它（忽略底部包含的simpleModal代码）。这是基本代码

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>

脚本

$(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 3

老式桌子（仍然）非常适合中心化，快速，流畅且无代码。

<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%}

当div的内容发生变化时，如何自动调整div的大小？

3 个答案: