Как автоматически изменить размер div в соответствии с размером его содержимого, если содержимое div изменилось? - PullRequest
Новая
       9

Как автоматически изменить размер div в соответствии с размером его содержимого, если содержимое div изменилось?

5 голосов
/ 17 ноября 2009

На данный момент у меня есть этот 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: 

$(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, который изменяет размер div с анимацией до некоторого размера после очистки сообщения об ошибке, и код в entry 2, который изменяет размер div до большего размера, чтобы сообщение об ошибке помещалось .

Но что мне больше всего нравится, так это способ узнать, изменилось ли содержимое внутри div, и соответствующим образом подогнать div, анимированно и автоматически.

Есть идеи? Еще раз спасибо.

Ответы [ 3 ]

2 голосов
/ 28 мая 2012

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

1 голос
/ 17 ноября 2009

Я никогда не использовал 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.

Обновление : Извините, я понял, что размытие не поддерживается живым событием. Поэтому я провел дополнительное тестирование и подготовил рабочую демонстрацию. Я разместил это в этом 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);
   }
  }
 });
}
0 голосов
/ 14 февраля 2014

Старомодные таблицы (все еще) отлично справляются с задачами, быстро, гибко и без кода. 

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