Comment redimensionner une div automatiquement à la taille de son contenu lorsque le contenu de la div ont changé?

Je n'ai jamais utilisé SimpleModal, mais à partir des exemples sur leur site, il semble que vous pouvez placer le récipient CSS. Si vous voulez la hauteur pour ajuster, essayez de régler la hauteur de auto

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

Bien que l'exemple ne l'a pas, je pense que vous devez ajouter px après la hauteur et la largeur entre guillemets (par exemple,"450px").

Ok, voici une autre idée. C'est peut-être trop, mais ajouter un champ caché:

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

puis attacher un changement de l'événement qui est déclenché en même temps de mettre à jour le message d'erreur.

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

Ce n'est pas testé et il est peut-être d'aller à la mer, mais je ne vois pas une fonction de mise à jour dans SimpleModal.

Mise à jour : Désolé, je pensais que le flou n'est pas pris en charge avec l'événement en direct. J'ai donc fait quelques tests supplémentaires et est venu avec un travail de démonstration. Je l'ai posté dans ce pastebin (ignorer le inclus simpleModal code en bas). Voici l'essentiel du code

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

OriginalL'auteur Mottie

Ancienne tables sont (encore) grand au centrage des choses, rapide, fluide et sans code.

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

OriginalL'auteur T4NK3R