How do I resize a div automatically to the size of its contents when the contents of the div have changed?

Question

At the moment, I have this DIV with a registration form centered over the page. The contents of the DIV come from an ascx-page. This is done nicely. Now, if the user tries t

Answer 1

I've never used SimpleModal, but from the examples on their site it looks like you can set the container CSS. If you want the height to adjust, try setting the height to auto

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

Although the example doesn't have it, I'd think you need to add px after the height and width in quotes (e.g. "450px").

---

Ok here is another idea. Maybe this is too much, but add a hidden input field:

  

    Enter your name: 
    
    
    
  

then attach a change event which is triggered at the same time you update the error message.

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

This is untested and it may be going overboard, but I don't see an update function in SimpleModal.

---

Update : Sorry I figured out that blur isn't supported with live event. So I did some further testing and came up with a working demo. I posted it in this pastebin (ignore the included simpleModal code at the bottom). Here is the essential 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

  

    What is your name: 

    
This name isn't Arthur.

    What is your quest: 

    
This quest must be for the Grail.

    What is your favorite color: 

    
Sorry, you must like red or blue.

    What is the air speed velocity of an unladen swallow:

    Type:
    
     African
     European
    
    

    
This guess stinks.
    

    
  

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